transform 小技巧

实现3D效果

1.父级开启3D视角

transform-style:preserve-3d

perspective:2000px //定义 3D 转换元素的透视视图

tansform:perspective(2000px)

2.rotate

rotate3d(x,y,z,angle)  //3D

//2D

rotateX(angle) 沿x轴旋转

rotateY(angle) 沿y轴旋转

rotateZ(angle) 沿z轴旋转

3.translate

translate3d(x,y,z) //3D

同上

4.scale

scale3d(x,y,z) //3D

同上

5.skew  //2D

skew(x-angle,y-angle)

skewX(angle)

skewY(angle)

6.

backface-visibility:visible/hidden  //隐藏背面

tansform-origin:left/px/%  center/px/%  //旋转中心

7.domo(翻牌效果)

/*css*/

　　

　　　　

前

　　　　

后

　　

 

转载于:https://www.cnblogs.com/xshaohua-com/p/6645976.html