1.变形
.box:hover{
/*box的动画不会影响到box2*/
/*位移*/
transform: translate(50px,50px);
}
.box2:hover{
/*沿Z轴旋转360度*/
transform: rotate(360deg);
}
.box3:hover{
/*缩放*/
transform: scale(0.5,0.2);
}
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
2.变形中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形中心点</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gold;
float: left;
margin: 30px;
transition: all 500ms ease;
}
div:hover{
transform: rotate(-90deg);
}
div:nth-child(1){
/*设置变形的中心点*/
transform-origin: left center;
}
div:nth-child(2){
transform-origin: left top;
}
div:nth-child(3){
transform-origin: 50px 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
运行结果：
image.png
3.背面可见 能翻动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背面可见</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
margin: 50px auto 0;
border: 1px solid #000;
}
.box1{
width: 300px;
height: 300px;
background-color: gold;
text-align: center;
line-height: 300px;
font-size: 50px;
transition: all 500ms ease;
/*设置盒子按3d空间显示*/
transform-style: preserve-3d;
/*设置透视距离、三维旋转的初始角度*/
transform: perspective(800px) rotateY(0deg);
/*设置盒子背面是否可见*/
backface-visibility: hidden;
}
.box:hover .box1{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">div元素</div>
</div>
</body>
</html>
运行结果：
image.png
image.png
4.动画作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 200px;
border: 3px solid black;
background-color:rgb(255,255,255);
margin: 0 auto;
/*margin: 50px solid black;*/
/*animation: moving 1s ease 1s 5 alternate both;*/
}
.box1{
width: 50px;
height: 100px;
background-color: yellow;
margin: 40px 15px;
float:right;
animation: moving 500ms ease 0ms infinite alternate both;
border-radius: 20px;
}
@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
}
.box2{
width: 50px;
height: 100px;
background-color:rgb(24,159,79);
margin: 40px 15px;
float:right;
animation: moving 500ms ease 100ms infinite alternate both;
border-radius: 20px
}
/*@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
} */
.box3{
width: 50px;
height: 100px;
background-color: rgb(92,59,148);
margin: 40px 15px;
float:right;
animation: moving 500ms ease 200ms infinite alternate both;
border-radius: 20px
}
/*@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
} */
.box4{
width: 50px;
height: 100px;
background-color: rgb(212,69,149);
margin: 40px 15px;
float:right;
animation: moving 500ms ease 300ms infinite alternate both;
border-radius: 20px
}
/*@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
} */
.box5{
width: 50px;
height: 100px;
background-color: rgb(36,136,285);
margin: 40px 15px;
float:right;
animation: moving 500ms ease 400ms infinite alternate both;
border-radius: 20px
}
/*.box:hover{
}*/
/*@keyframes moving{
from{
transform: scaleY(1);
}
to{
transform: scaleY(0.5);
}
} */
.box p{
width: 100%;
text-align: center;
font-size: 15px;
/*top: 20px;*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<p>loading...</p>
</div>
</body>
</html>
运行结果：
image.png
image.png
网友评论