关于css:2d平移旋转和缩放

31次阅读

共计 2437 个字符，预计需要花费 7 分钟才能阅读完成。

先来介绍一下平移，顾名思义，就是在立体上挪动嘛，很容易了解。
语法环节
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 ;
用这个也是同样的意思嗷

这个外表上写的是缩放，实际上是能够把图片放大的
不多说，咱们上案例
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 放大两倍的。
这个不细说，能够本人去试试。

正文完