CSS中实现图片旋转有多种方式,其中最常用的方式是通过transform属性为图片添加旋转效果。/*通过transform属性实现图片旋转*/ img{ transform:rotate(45deg)
CSS中实现图片旋转有多种方式,其中最常用的方式是通过transform属性为图片添加旋转效果。
/*通过transform属性实现图片旋转*/ img{ transform:rotate(45deg); }
上述代码将图片旋转45度,如果需要根据鼠标位置旋转图片,则可以使用鼠标悬停事件和:hover伪类实现:
/*鼠标悬停时图片旋转*/ img:hover{ transform-origin:center center;/*旋转中心为图片中心*/ transform:rotate(45deg); }
如果需要实现连续的旋转效果,则可以通过动画实现:
/*通过动画实现图片旋转*/ @keyframes rotate{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } img{ animation:rotate 2s linear infinite;/*持续2秒,线性变化,无限循环*/ }
上述代码将图片以线性变化的方式旋转360度,持续时间为2秒,并且无限循环旋转。
除了通过transform属性实现图片旋转,还可以通过CSS3中的transform-style属性为图片添加三维效果,实现更加生动的旋转效果:
/*通过transform-style实现3D旋转*/ .box{ perspective:1000px;/*视角距离*/ } img{ transform-style:preserve-3d;/*保持3D效果*/ animation:rotate 2s linear infinite; }
上述代码将图片添加了3D效果,同时也保持了通过动画实现的旋转效果。
粉丝
0
关注
0
收藏
0