先来介绍一下平移,顾名思义,就是在立体上挪动嘛,很容易了解。
语法环节
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 放大两倍的。
这个不细说,能够本人去试试。