CSS旋转动画怎么实现(2)-木庄网络博客

2022-03-28 10:34:15 PHP中文网 JavaScript 百度已收录

沿Z轴方向旋转

也基本与X轴的旋转几乎相同。仅更改旋转到Z轴方向的旋转。

@keyframes turnZ{
  0%{transform:rotateZ(0deg);}
  100%{transform:rotateZ(360deg);}
}
 
#rZ:hover{
  animation-name:turnZ;
  animation-duration:3s;
  animation-iteration-count:1;
}

将鼠标放在图像上时，沿Z轴方向旋转效果如下：

以上就是CSS图片旋转效果实现的全部内容了，更多有关CSS动画的内容，大家可以参考CSS3视频教程栏目！！！

以上就是CSS旋转动画怎么实现的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » CSS旋转动画怎么实现

CSS旋转动画怎么实现

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论