最新公告
  • 欢迎您光临源站网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 干货:css设置头像旋转与3D旋转效果

    经常会在一些网站看到评论区,评论人的头像当鼠标经过会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. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入

    源站网 » 干货:css设置头像旋转与3D旋转效果

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    支付成功却无法下载怎么办?
    复制支付宝支付订单号找客服解决。

    发表评论

    • 172会员总数(位)
    • 1381资源总数(个)
    • 41本周发布(个)
    • 8 今日发布(个)
    • 295稳定运行(天)

    本站终身SVIP限时优惠

    全站源码任意下载 了解详情