百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> h5头像图片扭转css3精准控制每个图片的位置-
分享文章到:

h5头像图片扭转css3精准控制每个图片的位置-

发布时间:08/01 来源:未知 浏览: 关键词:
h5头像图片扭转css3精准控制每个图片的位置:1.下面是需要的结果图:2.用到的图片有:<divid"box1Kuang1"><divclass"con-show01mar-top1mar-left1"><divclass"con-show02"><divclass"con-show03"&gt


h5头像图片扭转css3精准控制每个图片的位置:
1.下面是需要的结果图:

$REM: 24;//rem unit @function REM($n){ @return $n/$REM*1rem; } #box1Kuang1 { width: REM(517); height: REM(305); margin: 0 auto; background: url(../ossweb-img/box1_kuang1.png) 0 0 no-repeat; background-size: 100% 100%; margin-top: REM(30); .con-show01 { width: REM(94); height: REM(108); float: left; margin-left: REM(0); overflow: hidden; transform: rotate(120deg); .con-show02 { width: REM(94); height: REM(108); overflow: hidden; transform: rotate(-60deg); .con-show03 { width: REM(94); height: REM(108); overflow: hidden; transform: rotate(-60deg); background: url(../ossweb-img/prize_libao2.png) no-repeat 50% center; background-size: auto 100%; &>img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } &.mar-top1 { margin-top: REM(15); } &.mar-top2 { margin-top: REM(-58); } &.mar-top3 { margin-top: REM(-58); } &.mar-left1 { margin-left: REM(30); } &.mar-left2 { margin-left: REM(78); } &.mar-left3 { margin-left: REM(30); } } }

以上就是h5头像图片扭转css3精准控制每个图片的位置 的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板