乐趣区

关于css: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 放大两倍的。
这个不细说,能够本人去试试。

退出移动版