---恢复内容开始---
一、效果
二、知识点
1、background-color: rgba(0,0,0,.4); (红色、绿色、蓝色、透明度（0-1）)
2、position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*使用绝对定位万能居中*/
3、z-index: 1;/*绝对定位层级*/
4、transform: rotate(360deg) scale(1.4);/*旋转角度 放大比例 */
5、选择器 优先级 Id>>class> 标签 同级比价数量
6、list-item 与black相似 独占一行
三、源码
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>css3旋转放大属性</title> <style> body{ margin: 0; padding: 0; } .wrap{ width: 1000px; height: 500px; margin: 100px auto; background-color: #096; } .wrap ul{ list-style: none; margin: 0; padding: 0; } .wrap li{ position: relative;/*相对定位 监管绝对定位*/ float: left; width: 180px; height: 105px; margin: 30px 10px; background-color: rgba(0,0,0,.5);/*(红色，绿色，蓝色，透明度（0-1）)*/ } .wrap li:before, .wrap li:after{ position: absolute;/*绝对定位*/ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); content:'';/*伪元素激活必备*/ } .wrap li:before{ transform: rotate(-60deg); } .wrap li:after{ transform: rotate(60deg); } .wrap .important{ margin-left: 100px;/*左边距*/ } .wrap img{ position: absolute;/*万能居中position: absolute; top: 0;left: 0;right: 0;bottom: 0; margin: auto;*/ top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 75px; height: 75px; z-index: 1;/*绝对定位层级*/ } .wrap img:hover{ transform: rotate(360deg) scale(1.4);/*旋转角度 放大比例 */ transition: 1s; } /* 选择器 优先级 Id>>class> 标签 同级比价数量 list-item 与black相似 独占一行 */ </style> </head> <body> <div class="wrap"> <ul> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li class="important"><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> <li><img src="images1.png"></li> </ul> </div> </body> </html>
---恢复内容结束---