2d平移旋转和缩放

先来介绍一下平移，顾名思义，就是在平面上移动嘛，很容易理解。语法环节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放大两倍的。这个不细说，可以自己去试试。