4.7:2d和3d特效对比:

平面空间:transform-style:flat;
2d和3d特效对比:
形成3D空间(让父元素形成3d空间,3d舞台):transform-style:preserve-3D;
z轴上只能写具体像素,不能写百分比。
transform:translate(x,y);
transform:translatex();
transform:translatey();
3d位移:
transform:translate3d(x,y,z);
transform:translatez();
3D旋转
CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
3D缩放
 3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;
注:scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果
目标伪类选择器:
元素选择符:target{
//当元素被相关url指向的时候,做样式的变换。}
2d变形原点:transform-origin:left bottom/right top/center;
3d变形原点,即观察3d元素的(位置)角度
perspective-origin:center center  (中心)
perspective-origin:left top   (左上角)
perspective-origin:100% 100% (右下角)
多功能函数共同使用的情况下,尽量先写位移后写其他功能函数。

猜你喜欢

转载自www.cnblogs.com/xiaokeai233/p/12656709.html