变形/元素旋转/变形中心点/背面可见

变形

...............................................................................................

元素旋转

默认沿Z轴旋转

transform: rotate(45deg);

perspective设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

....................................................................................................................

>

/*旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/

.box{

width: 300px;

height: 300px;

background-color: gold;

margin: 50px auto 0;

transition: all 500ms ease;

/*设置盒子按3D空间显示*/

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

}

.box:hover{

/*默认沿Z轴旋转*/

/*transform: rotate(45deg);*/

/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/

/*transform: perspective(800px) rotateX(45deg);*/

transform: perspective(800px) rotateY(-45deg);

}

................................................................................................................................

 变形中心点

.............................................................................................................................................

背面可见

作者：YangMl

链接：https://www.jianshu.com/p/90f960ece5e6

来源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。