<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html,body{height:100%;}
body{background-color:#DE8910;}.rocket{position:absolute;left:100px;top:600px;height:120px;transform:translate(-200px ,200px) rotate(45deg);transition:all 1s ease-in;}
body:hover.rocket{transform:translate(500px,-500px) rotate(45deg);}</style>
</head>
<body>
<img src="https://www.linuxidc.com/images/rocket.png" alt=""/>
</body>
</html>
上方代码中，我们将 transform 的两个小属性合并起来写了。
小火箭图片的url：upload/2018_02/1802181531733320.png
案例2：扑克牌
rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：
transform-origin: 水平坐标 垂直坐标;
transform-origin: 50px 50px;
transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
我们来看一下 rotate 结合 transform-origin 的用法举例。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {/*background-color: #eee;*/}.box{width:300px;height:440px;margin:100pxauto;position:relative;}
img {width:100%;transition: all 1.5s;position:absolute;/* 既然扑克牌是叠在一起的，那就都用绝对定位 */left:0;top:0;transform-origin:centerbottom;/*旋转时，以盒子底部的中心为坐标原点*/box-shadow:003px0#666;}.box:hover img:nth-child(6) {transform: rotate(-10deg);}.box:hover img:nth-child(5) {transform: rotate(-20deg);}.box:hover img:nth-child(4) {transform: rotate(-30deg);}.box:hover img:nth-child(3) {transform: rotate(-40deg);}.box:hover img:nth-child(2) {transform: rotate(-50deg);}.box:hover img:nth-child(1) {transform: rotate(-60deg);}.box:hover img:nth-child(8) {transform: rotate(10deg);}.box:hover img:nth-child(9) {transform: rotate(20deg);}.box:hover img:nth-child(10) {transform: rotate(30deg);}.box:hover img:nth-child(11) {transform: rotate(40deg);}.box:hover img:nth-child(12) {transform: rotate(50deg);}.box:hover img:nth-child(13) {transform: rotate(60deg);}</style>
</head>
<body>
<div>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
<img src="https://www.linuxidc.com/images/pk2.png"/>
<img src="https://www.linuxidc.com/images/pk1.png"/>
</div>
</body>
</html>
效果如下：
暂略。
3D 转换 1、旋转：rotateX、rotateY、rotateZ3D坐标系（左手坐标系）
如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。
浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
旋转的方向：（左手法则）
左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。
从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
格式举例：
（1）rotateX 举例：