transform介绍
可控制css元素的位移及旋转状态,可单独使用,也可与perspective透视一起使用。
以下介绍下transform的属性及function
属性
transform: 应用transform不同的属性。其值可为:
1、perspective
若是父元素应用了透视perspective xx px, 子元素的transform属性值可为perspective(yy px), yy值越小,则焦距越小,呈现的效果就是类似广角的效果,若值越大,则焦距越远,元素看起来就像在远处一样,一般yy小于xx值,过大的yy值没有太大区别。
2、translate3d(x,y,z)
定义一个3d的旋转变化,是translateX(x), translateY(y), translateZ(z)的缩写
3、translateX(x), translateY(y), translateZ(z)
沿x,y,z轴方向移动x,y,z的距离
4、scale3d(x,y,z)
定义x,y,z三维的大小变形
5、scaleX(x), scaleY(y), scaleZ(z)
分别沿x,y,z轴方向的尺寸变形,放大或缩写
6、rotate3d(x,y,z,angle)
定义沿x,y,z三轴的旋转程度,值为正,表示顺时针转,值为负,表示逆时针转
7、rotateX(angle), rotateY(angle), rotateZ(angle)
分别沿x,y,z轴方向的旋转角度,此外还有skew,倾斜角度,设置类似,比较少用
其他属性
通常在要对多个子元素进行transform透视设置时,会先用一个父元素将子元素包住,父元素类似镜头,父元素上设置perspective灭点的值,类似焦距,一般设置为500-1000px左右。此外还可在父元素上设置以下属性:
1、transform-style属性,值为flat或perspective-3d,前者表示2d显示子元素,后者为3D透视表示子元素。
2、perspective-origin: 设置视角的位置,值可为xx% yy%或center,left等,距左边和上面多少距离。类似调整摄像机的位置,从哪个角度拍。注意区别子元素的transform-origin--调整子元素位移参考点或旋转轴位置。
应用
1、实现梦幻星空效果
@keyframes rotate{
0%{
transform:perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100%{
transform:perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
}
}
.stars{
transform:perspective(500px);
transform-style:preserve-3d;
position:absolute;
bottom:0;
perspective-origin:50% 100%;
left:50%;
animation:rotate 90s infinite linear;
}
.star{
width:2px;
height:2px;
background:#F7F7B6;
//border-radius:100%;
position:absolute;
top:0;
left:0;
transform-origin:0 0 -300px;
transform:translate3d(0,0,-300px);
backface-visibility:hidden;
}
2、轮播-旋转木马