h5头像图片旋转css3精确控制每个图片的位置
2017-09-27 10:01
573 查看
h5头像图片旋转css3精确控制每个图片的位置:
1.下面是需要的效果图:
2.用到的图片有:
主要是利用了transform来对图片进行旋转的控制。
1.下面是需要的效果图:
2.用到的图片有:
<div id="box1Kuang1"> <div class="con-show01 mar-top1 mar-left1"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top1"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top1"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top1"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top1"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="clearfix"></div> <div class="con-show01 mar-top2 mar-left2"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top2"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top2"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top2"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="clearfix"></div> <div class="con-show01 mar-top3 mar-left3"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top3"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top3"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top3"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> <div class="con-show01 mar-top3"> <div class="con-show02"> <div class="con-show03"> <img src="ossweb-img/hexagon.png"> </div> </div> </div> </div> $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); } } }
主要是利用了transform来对图片进行旋转的控制。
相关文章推荐
- java: 用 jxl: 精确控制图片的位置和大小
- php 给图片添加文字水印 可控制位置,旋转,多行文字
- 可控制转速CSS3旋转风车特效
- CSS3实现头像旋转功能
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- Android中利用matrix 控制图片的旋转、缩放、移动
- LaTeX技巧96:LaTeX 图片控制命令,位置控制
- H5学习之路-图片旋转、压缩处理
- Ios精品源码,tableview下载视频直播源播放器图片位置3D立体旋转相册屏风动画
- javascript控制图片旋转2
- JS控制图片拖动 放大 缩小 旋转
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
- 图片的每点击一次旋转90度, filter和css3属性
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
- CSS3对背景图片的裁剪及尺寸和位置的设定方法
- js图片轮播,可控制中间位置选中状态和左右箭头控制
- CSS3实现图片循环旋转
- Android matrix 控制图片的旋转、缩放、移动
- css3 图片旋转效果 以y轴翻转效果等
- js控制一个三角图片的旋转