旋转rotate()
- 旋转 rotate()函数 通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。
旋转方式
- 顺时针旋转45度
1
transform: rotate(45deg);
- 案例
1
2
3
4
5
6
7
8
9
10
11
12
13...
img {
width: 150px;
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上,谁做动画给谁加 */
transition: all 0.3s;
}
/* 鼠标经过的时候旋转 */
img:hover {
transform: rotate(360deg);
}
...1
2
3
4
5
6...
<-- 这里可以放入一张图片,或者一个有颜色的盒子,目的是为了看的更清晰 -->
<body>
<img src="media/pic.jpg" alt="">
</body>
... - 输出结果
如果对你有所帮助,欢迎点赞收藏哦,共同进步哦!!
加油学,学不fei就继续,你fei了吗?^ v ^
[简书源] https://www.jianshu.com/p/5e268c6cbadf
- 本文作者: it JinZhan
- 本文链接: http://example.com/2021/08/15/2021-8-15-2D旋转/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!