首页 > 代码库 > 2016-11-23

2016-11-23

2024-08-22 19:17:29   220人阅读

CSS3实现2D效果-旋转 变大，移动

CSS文件里面的代码↓↓ css3-2D效果.css

/*设置全部div的属性*/
div{
    width:100px; /*设置宽度*/
    height:100px;/*设置高度*/
    background:red;/*设置背景颜色*/
    margin-left:50px;/*设置左外边框距离*/
    transition:all 1s; /*设置过度时间*/
    float:left;/*向左浮动*/
}
.div1:hover{
    transform:translate(100px);/*向右移动100px*/
}
.div2:hover{
    transform:rotate(360deg);/*设置旋转角度360°*/
}
.div3:hover{
    transform:scale(1.5,1.5);/*设置xy坐标，相当于向xy坐标扩大多少倍*/
}
.div4:hover{
    transform:skew(30deg,20deg);/*围绕 X 轴把元素翻转30度，围绕 Y 轴翻转 20 度*/
}

 

html里面的代码↓↓↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>css3-2D效果</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="css3-2D效果.css" />
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
    <div class="div1">2D转换translate</div>
    <div class="div2">2D转换rotate</div>
    <div class="div3">2D转换scale</div>
    <div class="div4">2D转换skew</div>
</body>
</html>

 

2016-11-23


联系
我们