目录:
- 1.简介
- 2.详解
一、 简介
通过旋转可以使元素沿着x, y,或者z选择指定的角度
rotateX()
rotateY()
rotateZ()
相关术语:
45deg: 45度
1turn 1圈, .5turn 半圈
二、 详解
需求:在界面上定义一个box1, 放到视口中,当鼠标移动到他上面,box1开始旋转。
1.基础布局
<style>
html{
/* 添加了视距,就有了透视的效果*/
perspective: 800px;
}
body{
border:1px red solid;
background-color: silver;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
margin: 200px auto;
/* 当进行旋转的时候,这个动画是在2s内完成的*/
transition: 2s;
}
body:hover .box1{
/*绕着Z轴旋转:就是顺时针转45度*/
transform: rotateZ(45deg);
}
</style>
<div class="box1"></div>
2.绕X轴旋转,就是水平方向,那你看到的效果,就是他在上下移动,往后仰一样。
body:hover .box1{
/*绕着x轴旋转:就是顺时针转45度*/
transform: rotateX(45deg);
}
3.绕Y轴旋转,就是竖直轴转,看起来像在推门效果
body:hover .box1{
/*绕着y轴旋转:就是顺时针转45度*/
transform: rotateY(45deg);
}
4.先Y轴旋转,会有推门效果,然后在往Z轴平移,就是右侧在移动100px, 看到效果就像在 往右侧压缩折叠门。
关于这个rotateY 和translateZ 的配合使用,很多音乐网站,卡片这种动画翻转效果都用到了
body:hover .box1{
/* y写在前面,会先转,后往右移动,视图变小 ,反过来会变大*/
/*transform:rotateY(45deg) translateZ(100px); */
/* y轴如果是负数,在写translateZ,会发现效果像在往左边压缩折叠门*/
/*transform:rotateY(-45deg) translateZ(100px); */
/*如果y是360,效果就是围绕竖直的y轴,旋转一个360度,一圈*/
/* transform:rotateY(360deg) translateZ(100px); */
/*如果是y是180,效果是往后移动,把他的背面旋转过来,看起来有缩小效果 */
/*transform:rotateY(180deg) translateZ(100px); */
/*如果是translate在前,rotate在后,会发现,box1是先往前靠近移动,在旋转,看 起来有放大效果,所以位置不同,透视效果不同 */
/*transform:translateZ(400px) rotateY(180deg); */
/*如果我们不想要这种透视效果,只是让他绕固定的y轴,旋转 。*/
transform: rotateY(180deg);
}
文章来源:https://www.toymoban.com/news/detail-505524.html
5.通常我们给box1设置了一个图片,然后让他绕y轴旋转180度,发现,正面,背面都是有图片的。如果现在我们想让他旋转到背面的时候,为空白。文章来源地址https://www.toymoban.com/news/detail-505524.html
body:hover .box1{
transform: rotateY(180deg);
/* 是否显示元素的背面,如果是hidden,则转完后,看不到了背面的东西 */
backface-visibility: hidden;
}
<div class="box1">
<img src="an.jpg" alt="">
</div>
到了这里,关于五、动画 - 旋转rotate的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!