transform
transform:translate(x,y) /*向x轴或者y轴方向移动*/
transform:rotate() /*旋转，默认围绕z轴旋转，单位deg*/
transform:rotateX() /*围绕x轴旋转*/
transform:rotateY() /*围绕y轴旋转*/
transform:rotateZ() /*围绕z轴旋转*/
transform:scale(x，y) /*向x轴或者y轴方向增大或者缩小*/
transform:translate(x,y) rotate() scale(x，y) /*综合写法，中间用空格隔开*/
transform-origin
transform-origin:x y
/*x和y的取值：具体像素、百分比、特殊含义的单词（top,right,bottom,left,center）*/
perspective
perspective:500px; /*透视，近大远小，只能设置给父元素以上*/
box-shadow
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
相片墙代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相片墙</title>
<style>
*{
margin:0;
padding:0;
}
ul{
height:800px;
background-color:skyblue;
margin:100px auto;
list-style:none;
text-align:center;
}
ul li {
width:180px;
height:200px;
display:inline-block;
margin-top:100px;
margin-left:20px;
border:3px solid white;
box-sizing:border-box;
overflow:hidden;
position:relative;
transition:transform 1s;
box-shadow:0 0 10px;
}
ul li:nth-of-type(1){
transform:rotate(20deg);
}
ul li:nth-of-type(2){
transform:rotate(-45deg);
}
ul li:nth-of-type(3){
transform:rotate(10deg);
}
ul li:nth-of-type(4){
transform:rotate(45deg);
}
ul li:nth-of-type(5){
transform:rotate(-10deg);
}
ul li img{
width:180px;
height:200px;
}
ul li:hover{
transform:scale(2)translate(0,100px);
z-index:100;
}
</style>
</head>
<body>
<ul>
<li>
<img src="imges/QZL.jpg" >
</li>
<li>
<img src="imges/CYX.jpg" >
</li>
<li>
<img src="imges/CGX.jpg" >
</li>
<li>
<img src="imges/ZGR.jpg" >
</li>
<li>
<img src="imges/ZJL.jpg" >
</li>
</ul>
</body>
</html>
翻转菜单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转菜单</title>
<style>
*{
margin:0;
padding:0;
}
.one{
width:600px;
height:50px;
background-color:grey;
margin:0px auto;
margin-top:100px;
font-size:20px;
color:white;
}
.one>li{
list-style:none;
text-align:center;
line-height:50px;
width:170px;
height:50px;
float:left;
background-color:rgb(0,0,0);
margin-left:22.5px;
position:relative;
}
.two{
width:170px;
height:250px;
position:absolute;
top:50px;
left:0px;
}
.two>li{
list-style:none;
width:170px;
height:50px;
transform:rotateY(180deg);
background-color:rgba(0,0,0,0.5);
opacity:0;
transition:opacity 2s,transform 1s;
}
.one>li:hover .two>li{
transform:none;
opacity:1;
}
.one>li:hover .two li:nth-of-type(1){
transition-delay:0ms;
}
.one>li:hover .two li:nth-of-type(2){
transition-delay:200ms;
}
.one>li:hover .two li:nth-of-type(3){
transition-delay:400ms;
}
.one>li:hover .two li:nth-of-type(4){
transition-delay:600ms;
}
.one>li:hover .two li:nth-of-type(5){
transition-delay:800ms;
}
.one>li .two>li:nth-of-type(5){
transition-delay:0ms;
}
.one>li .two>li:nth-of-type(4){
transition-delay:200ms;
}
.one>li .two>li:nth-of-type(3){
transition-delay:400ms;
}
.one>li .two>li:nth-of-type(2){
transition-delay:600ms;
}
.one>li .two>li:nth-of-type(1){
transition-delay:800ms;
}
.txt{
width:600px;
height:300px;
background-color:#efefef;
margin:0px auto;
}
</style>
</head>
<body>
<ul class="one">
<li>一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
<div class="txt">
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</body>
</html>
