PHP从入门到精通，040第三章HTML5+CSS3——CSS3
2019-07-08 本文已影响2人
极客研习社
五、transform属性
块元素居中显示（transform定位）
1、translate: 以原点为坐标进行移动的方式
transform:translate (-50%,-50%); /以左上角为原点，先左右再上下/
2、2d旋转的效果——transform-origin、transform:rotate
transform-origin:top left; （旋转的中心点，中心点在左上角）
transform:rotate(45deg); （deg表示度数）
3、CSS3的斜切效果
transform:skewX(45deg);
transform:skewY(45deg);
4、图片旋转的效果（头像旋转 过渡效果）
transition:all 2s;（过渡效果，多长时间实现效果）
5、3d沿着X轴底部旋转
transform:rotateX(60deg);
perspective:300px; 透视的宽度
6、放大效果
tansform:scale(0.5); X轴和Y轴都是缩放0.5倍
tansform:scaleX(0.5); X轴缩放0.5倍
tansform:scaleY(0.5); Y轴缩放0.5倍
tansform:scale(2,3); X轴放大2倍,Y轴放大3倍
照片墙案列
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.box {
margin-top:100px;
}
img {
padding:10px 10px 15px 10px;
box-shadow:2px 2px 2px 1px #bbb;
border:1px solid #eee;
position:absolute;
transition:all 0.5s;
z-index:1;
}
.pic {
width:160px;
}
.pic1 {
top:50px;
left:300px;
transform:rotate(36deg);
}
.pic2 {
top:50px;
left:400px;
transform:rotate(36deg);
}
.pic3 {
top:50px;
left:500px;
transform:rotate(36deg);
}
.pic4 {
top:100px;
left:600px;
transform:rotate(36deg);
}
.pic5 {
top:150px;
left:700px;
transform:rotate(36deg);
}
.pic6 {
top:50px;
left:800px;
transform:rotate(36deg);
}
.pic7 {
top:100px;
left:850px;
transform:rotate(36deg);
}
.pic8 {
top:150px;
left:900px;
transform:rotate(36deg);
}
.pic9 {
top:0px;
left:300px;
transform:rotate(36deg);
}
.pic11 {
top:0px;
left:300px;
transform:rotate(36deg);
}
img:hover {
transform:rotate(0deg);
transform:scale(1.2);
z-index:15;
}
</style>
</head>
<body>
<div class="box">
<img class="pic pic1" src="./images/1.jpg" />
<img class="pic pic2" src="./images/2.jpg" />
<img class="pic pic3" src="./images/3.jpg" />
<img class="pic pic4" src="./images/4.jpg" />
<img class="pic pic5" src="./images/5.jpg" />
<img class="pic pic6" src="./images/6.jpg" />
<img class="pic pic7" src="./images/7.jpg" />
<img class="pic pic8" src="./images/8.jpg" />
<img class="pic pic9" src="./images/9.jpg" />
<img class="pic pic11" src="./images/11.jpg" />
</div>
</body>
</html>
