h5头像图片扭转css3精准控制每个图片的位置-
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精准控制每个图片的位置 的细致内容,更多请关注 百分百源码网 其它相干文章!