2D
使用transform属性,结合2D变换方法
下面代码是基本模板
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
<body>
<div class="contain">
<div class="test">我是新的位置</div>
<div class="test2">我是老的的位置</div>
</div>
</body>
body {
padding: 10px;
}
.contain {
border: 1px solid;
height: 500px;
padding: 50px;
position: relative;
}
.test{
width: 300px;
line-height: 300px;
background-color: crimson;
text-align: center;
transform: translate(220px,50px);
}
.test2{
width: 300px;
line-height: 300px;
text-align: center;
background: yellow;
position: absolute;
top: 50px;
z-index: -1;
}
转换方法:
transform: translate(220px,50px);
translate(x,y) 偏移距离基于左上角,x轴,y轴 ,因为是基于点的位置,也可以认为原点是元素中心
transform: rotate(60deg);
rotate()以元素中心旋转,正数顺时针旋转
transform: scale(0.5,0.5);
scale(x,y) 中心位置不变,宽高变为对应的倍数
transform: skew(30deg,30deg);
scale(x,y),以中心位置建立直角坐标系,倾斜角度,分别是宽和高与x轴和y轴的角度
x角度表示高与x轴的角度,y角度表示宽与y轴的角度
transform-origin:50% 50%;
以元素原始位置的左上角为基准点,改变2D转换的基准位置,50%恰好是元素的中心位置
3D
transform: rotateX(45deg);
围绕x轴旋转角度
其他变换参考这个标准来就行
transform-style: flat|preserve-3d
值 | 描述 |
---|---|
flat | 表示所有子元素在2D平面呈现。 |
preserve-3d | 表示所有子元素在3D空间中呈现。 |
过度
transition: width 2s
transition: all 2s;过度效果必须有类是hover这样得事件去定义元素终态
动画
@keyframes mymove //定义动画效果
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
div
{
animation:mymove 5s infinite;//执行动画并定义不服动画属性
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}