目录：
- 1.简介
- 2.详解
一、 简介
通过旋转可以使元素沿着x, y,或者z选择指定的角度rotateX()rotateY()rotateZ()相关术语：45deg： 45度1turn 1圈， .5turn 半圈二、 详解
需求：在界面上定义一个box1, 放到视口中，当鼠标移动到他上面，box1开始旋转。
1.基础布局
<style>html{/* 添加了视距，就有了透视的效果*/perspective: 800px;}body{border:1px red solid;background-color: silver;}.box1{width: 100px;height: 100px;background-color: #bfa;margin: 200px auto;/* 当进行旋转的时候，这个动画是在2s内完成的*/transition: 2s;}body:hover .box1{/*绕着Z轴旋转：就是顺时针转45度*/transform: rotateZ(45deg);}</style><div class="box1"></div>
2.绕X轴旋转，就是水平方向，那你看到的效果，就是他在上下移动,往后仰一样。
body:hover .box1{/*绕着x轴旋转：就是顺时针转45度*/transform: rotateX(45deg);}
3.绕Y轴旋转，就是竖直轴转，看起来像在推门效果
body:hover .box1{/*绕着y轴旋转：就是顺时针转45度*/transform: rotateY(45deg);}
4.先Y轴旋转，会有推门效果，然后在往Z轴平移，就是右侧在移动100px, 看到效果就像在 往右侧压缩折叠门。
关于这个rotateY 和translateZ 的配合使用，很多音乐网站，卡片这种动画翻转效果都用到了
body:hover .box1{/* y写在前面，会先转，后往右移动，视图变小 ，反过来会变大*//*transform:rotateY(45deg) translateZ(100px); *//* y轴如果是负数，在写translateZ,会发现效果像在往左边压缩折叠门*//*transform:rotateY(-45deg) translateZ(100px); *//*如果y是360，效果就是围绕竖直的y轴，旋转一个360度，一圈*//* transform:rotateY(360deg) translateZ(100px); *//*如果是y是180，效果是往后移动，把他的背面旋转过来，看起来有缩小效果 *//*transform:rotateY(180deg) translateZ(100px); *//*如果是translate在前，rotate在后，会发现，box1是先往前靠近移动，在旋转，看 起来有放大效果，所以位置不同，透视效果不同 *//*transform:translateZ(400px) rotateY(180deg); *//*如果我们不想要这种透视效果，只是让他绕固定的y轴，旋转 。*/transform: rotateY(180deg);}
5.通常我们给box1设置了一个图片，然后让他绕y轴旋转180度，发现，正面，背面都是有图片的。如果现在我们想让他旋转到背面的时候，为空白。
body:hover .box1{transform: rotateY(180deg);/* 是否显示元素的背面，如果是hidden，则转完后，看不到了背面的东西 */backface-visibility: hidden;}<div class="box1"><img src="an.jpg" alt=""></div>
