经常会在一些网站看到评论区,评论人的头像当鼠标经过会360°旋转,其实很简单。
代码
<!-- css部分 --> <style type="text/css"> .cs-css1 img{ height:300px; border-radius:50%; border:2px solid green; /*变化规则*/ transition:all 2s; } .cs-css1 img:hover{ /* 变化动作 定义2d旋转,参数填写角度 */ transform:rotate(360deg); } </style> <!-- HTML部分(很简单,就一张图片) --> <div class="cs-css1"> <img src="/upload/2020/20200702230239_8099.jpg"> </div>
另外一个代码如下:
<!-- 3D旋转效果 --> <style type="text/css"> .cs-css2 { width:300px; height:300px; border:1px solid red; /*如果希望看到3d效果,需要在动的这个元素的父元素,增加一个perspective属性*/ perspective:300px;/*3D 元素距视图的距离,一般与图片的高一致效果最佳*/ } .cs-css2 img{ width:300px; height:300px; border:1px solid red; /*变化规则*/ /*设置旋转元素的原点位置*/ transform-origin:bottom; transition:all 2s; } .cs-css2 img:hover{ /*变化动作*/ transform:rotateX(60deg); } </style> <div class="cs-css2"> <img src="/upload/2020/20200702230239_8099.jpg"> </div>
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected]
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入
源站网 » 干货:css设置头像旋转与3D旋转效果
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 支付成功却无法下载怎么办?