2D转换之旋转——rotate的用法
首先，我们给一张图片作为研究对象，在这里，需要给出图片的储存路径，示例代码如下：
<body>
<img src="E:HTML+CSS案例media1006.jpg" alt="">
</body>
其中E:HTML+CSS案例media1006.jpg是我本地储存该图片的路径。
现在，我们用rotate来进行图片旋转
rotate进行进行旋转的规则的为：
rotate( deg） 若rotate所接( deg）为正值，则顺时针旋转；若rotate所接( deg）为负值，则逆时针旋转。(deg表示角度的单位)。
eg：
假设，我们想使图片顺时针旋转45度，则代码为transform: rotate(45deg);
现在，我们运用rotate做一个鼠标碰到的旋转动画：
<style>
img： {
width: 300px;
border: 5px solid pink;
transition: all 0.6s;
}
img:hover {
transform: rotate(360deg);
}
</style>
备注：
border: 5px solid pink;
这句代码是为了定义图片外边框的性质，在这里的意思是外边框宽度为5px，边框为实线，颜色为pink色。
transition: all 0.6s;
这句代码是为了增添动画效果，因为旋转的本体是img代表的图片，所以写道第一个img上（transition做动画过程的规则是：过渡写到本身上，谁做动画给谁加）。在这里地意思是显示动画全过程，全过程总时间0.6秒。
img:hover {
transform: rotate(360deg);
}
这句代码的意思是：当鼠标移动到img所代表的图片时，图片旋转360度。
最后
以上就是干净柚子最近收集整理的关于2D转换之旋转——rotate的用法的全部内容，更多相关2D转换之旋转——rotate内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复