先来介绍一下平移，顾名思义，就是在立体上挪动嘛，很容易了解。
语法环节
transform：translate（50px 50px）这里呢我应用的是简写的办法，代表该元素向x轴和y轴挪动50px
当然也能够一个一个定义，只须要把transltate改成transltateX或Y，记住这里的x和y要大写，而且一旦独自定义
那么括号里的值只能是一个，至于用两个会怎么样我不晓得，因为我没那么傻。而且能写一行我是不会想着多写
一行的。
translate这个就是代表平移了
rotate这个是旋转，我同样用的是简写。想要不简写的参考平移就行。xxdeg代表旋转角度
哦对，如果是间接加平移的话是会间接产生间隔的，想要察看分明的话加个过渡，这个我上一篇有提到如何应用。
接下来咱们说一说旋转：
也先进行一个介绍，旋转的话必定是要依据一个点或者一条线旋转对吧？然而当初是在2d里，所以咱们先介绍一下
点上的旋转，话不多说，上案例
css局部：
.bigbox{
width: 500px; height: 600px; border:1px solid #f00; margin: auto;}.box { width: 200px; height: 400px; position: relative; margin-top: 100px; margin: auto; }.box img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition:all 2s; transform-origin: center bottom; }.bigbox:hover img:nth-child(1) { transform:rotate(-60deg);}.bigbox:hover img:nth-child(2) { transform:rotate(-50deg);}.bigbox:hover img:nth-child(3) { transform:rotate(-40deg);}.bigbox:hover img:nth-child(4) { transform:rotate(-30deg);}.bigbox:hover img:nth-child(5) { transform:rotate(-20deg);}.bigbox:hover img:nth-child(6) { transform:rotate(-10deg);}.bigbox:hover img:nth-child(8) { transform:rotate(10deg);}.bigbox:hover img:nth-child(9) { transform:rotate(20deg);}.bigbox:hover img:nth-child(10) { transform:rotate(30deg);}.bigbox:hover img:nth-child(11) { transform:rotate(40deg);}.bigbox:hover img:nth-child(12) { transform:rotate(50deg);}.bigbox:hover img:nth-child(13) { transform:rotate(60deg);}html局部：
<div class="bigbox">
<div class="box"> <img src="images/c-1.png" alt=""> <img src="images/c-2.png" alt=""> <img src="images/c-3.png" alt=""> <img src="images/c-4.png" alt=""> <img src="images/c-5.png" alt=""> <img src="images/c-6.png" alt=""> <img src="images/c-7.png" alt=""> <img src="images/c-8.png" alt=""> <img src="images/c-9.png" alt=""> <img src="images/c-10.png" alt=""> <img src="images/c-11.png" alt=""> <img src="images/c-12.png" alt=""> <img src="black13.png" alt=""></div></div>
当然啊，这图你们能够本人去找。
效果图能够本人去实现一下。
这两头咱们有提到一个语法：
transform-origin: center bottom;
这个呢是规定从哪个点开始旋转，咱们也能够用像素示意
第一个呢代表x轴，第二的那就不必我多说了吧，2d图一共就两个轴。
用像素代表就是
transform-origin: 100px 0px ;
用这个也是同样的意思嗷
transform: scale缩放
这个外表上写的是缩放，实际上是能够把图片放大的
不多说，咱们上案例
html局部：
<div class="box">
<div class="small"></div></div>css局部：
.box{
width: 300px;height: 300px; border:1px solid #333;}.small{ width: 100px;height: 100px; background-color:#f00; transition:all 3s;}.box:hover .small{ transform:translate(200px,100px) scale(2);}这里也看到我的写法可能会很好奇，实际上大家都能发现因为旋转平移这个缩放是同一个属性，
只是值不一样，然而如果分两行就会笼罩上一行代码，我在这里写的就是复合，也就是在
向x轴平移200px和y轴100px的过程中同时放大了该div的两倍。scale（2）是一个简写
代表该div向x轴和y轴放大两倍，至于只向x或者只向y轴变大的话是不能使整个div放大两倍的。
这个不细说，能够本人去试试。