2D旋转指的是让元素在二维平面内顺时针旋转或逆时针旋转
语法
transform:rotate(度数)
重点
rotate(45deg)
)下面我们来使一张图片进行旋转
img {
width: 150px;
position: fixed;
top: 50%;
left: 50%;
margin: -75px;
transition: all 1.5s;
}
img:hover {
transform: rotate(360deg);
}
transform-origin
可以用来设置元素转换的中心点
语法
transform-origin: x y;
重点
transform-origin: 50% 50%;
等价于transform-origin: center center;
transform-origin: 40px 40px;
可以是px 像素transform-origin: left bottom;
下面我们来演示一下transform-origin: 40px 40px;
img {
width: 150px;
position: fixed;
top: 50%;
left: 50%;
margin: -75px;
transition: all 1.5s;
transform-origin: 40px 40px;
}
img:hover {
transform: rotate(360deg);
}
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。