缩放scale,旋转rotate,倾斜skew
transition(过渡) : 要过度的属性 花费的时间 运动曲线 何时开始
anmation动画: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方
transfrom - style:presver-3d :2d转3d,保留原来的状态
注意: transfrom-origin 一定不要写在hover里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box ul li img{
width: 200px;
height: 100px;
}
.box ul{
width: 800px;
height: 205px;
}
.box ul li{
float: left;
}
.box ul li:first-child:hover{
transform: rotate(360deg);
transition: all 2s;
}
.box ul li:nth-child(2):hover{
/*scale:倍数*/
transform: scale(2);
transition: all 2s;
}
.box ul li:nth-child(3):hover{
/*倾斜 skew */
transform: skew(22deg,33deg);
transition: all 2s;
}
.box ul li:nth-child(4):hover{
/*rotateY沿Y轴旋转*/
transform: rotateY(-180deg);
transition: all 2s;
}
.box ul li:nth-child(4){
transform-origin:center ;
}
.box ul li:nth-child(4):hover{
/*旋转+放大*/
transform:scale(2) rotate(360deg);
transition: all 2s;
/*transform-origin:left ;*/
}
.box ul{
perspective: 100px;
}
.box ul li:nth-child(5):hover{
transform: rotateX(-80deg);
transition: all 2s;
/*perspective: 1000px; //父盒子近大远小 */
}
.box ul li:nth-child(6):hover{
transform: translateZ(20px) translateX(20px) ;
transition: all 2s;
}
.box ul li:nth-child(7):hover{
animation: move 1s infinite linear;
}
@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box ul li:nth-child(8):hover{
animation: move 0.3s infinite linear;
}
@keyframes move {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/pic1.jpg"></li>
<li><img src="img/pic2.jpg"></li>
<li><img src="img/pic3.jpg"></li>
<li><img src="img/pic4.jpg"></li>
<li><img src="img/pic5.jpg"></li>
<li><img src="img/pic6.jpg"></li>
<li><img src="img/pic7.jpg"></li>
<li><img src="img/pic8.jpg"></li>
</ul>
</div>
</body>
</html>
照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.buju{
margin:150px auto;
width:235px;
perspective:1000px;
position:relative;
/*transform-style:preserve-3d;*/
}
.x{
transform-style:preserve-3d;
transform:rotateX(-30deg);
}
.y{
transform-style:preserve-3d;
transform:rotateY(20deg);
/*animation:zhuan 20s linear infinite;*/
}
@keyframes zhuan{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
.y:hover{
animation:none;
}
.a{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/1.jpg);
position:absolute;
transform:rotateY(0deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
.b{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/2.jpg);
position:absolute;
transform:rotateY(60deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
.c{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/2.jpg);
position:absolute;
transform:rotateY(120deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
.d{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/2.jpg);
position:absolute;
transform:rotateY(180deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
.e{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/2.jpg);
position:absolute;
transform:rotateY(240deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
.f{
width:235px;
height:235px;
border-radius:15px;
background-size:100% 100%;
background:url(img/2.jpg);
position:absolute;
transform:rotateY(300deg) translateZ(250PX);
border:5px solid rgb(230,230,229);
}
</style>
</head>
<body>
<div class="buju">
<div class="x">
<div class="y">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
</div>
</div>