CSS3中的3D效果
1.rotateX()方法(围绕其在一个给定度数X轴旋转的元素)
div{ width:100px;
height:75px;
background-color:red;
border:1px solid black;
transition: all 5s; }
div:hover{ transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg); /* Safari and Chrome */ }
2.rotateY()方法(围绕其在一个给定度数Y轴旋转的元素)
3.rotateZ()方法(围绕其在一个给定度数Z轴旋转的元素 默认值)
在这里插入代码片
4.景深:perspective:value;离屏幕多远的距离去观察元素,值越大幅度越小。
在这里插入代码片
5.transform-style属性规定如何在3D空间中呈现被嵌套的元素。
preserve-3d表示3D透视