目录
属性值:transform: translate(平移)rotate(旋转) scale(缩放)skew(扭曲);
平移:
transform: translateX(500px); 水平移动
transform: translateY(300px); 垂直移动
transform: translate(500px,300px); 水平垂直移动,路径是斜着向右下角(值均可为负)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #00FFFF;
transition: 1s;
}
.box:hover{
/*transform: translateX(500px);
transform: translateY(300px);*/
transform: translate(500px,300px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
扩展:(居中对齐)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 400px;
background-color: #00FFFF;
}
.box1{
width: 200px;
height: 200px;
background-color: #0000FF;
transform: translate(50%,50%);
}
/*.box1:hover{
transform: translate(100px,100px);
}*/
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
旋转:
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
perspective(透视)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box4 {
width: 400px;
height: 500px;
border: red solid 1px;
perspective: 100px;
}
.box img {
width: 400px;
transition: 1s;
}
.box:hover img {
/*transform: rotateX(180deg);*/
/*transform: rotatey(180deg);*/
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<div class="box">
<img src="2/liqingzhao.jpg">
</div>
</body>
</html>
缩放:
transform: scaleX(1);
transform: scaleY(1);
值最小为零,不能为负
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
position: relative;
width: 500px;
height: 500px;
box-shadow: 0 0 0 2px #008000;
}
.box1 img{
width: 300px;
transition: 1s;
position: absolute;
left: 0;top: 0;bottom: 0;right: 0;
margin: auto;
}
.box1:hover img{
transform: scale(0.5);
}
.box1>div{
position: absolute;
left: 0;top: 0;bottom: 0;right: 0;
margin: auto;
}
.box1 .line1{
width: 450px;
height: 300px;
border-top: #00FF00 2px solid;
border-bottom: #00FF00 2px solid;
transform: scaleX(0);
transition: 0.5s;
}
.box1 .line2{
width: 300px;
height: 450px;
border-left: #00FF00 2px solid;
border-right: #00FF00 2px solid;
transform: scaleY(0);
transition: 0.5s;
}
.box1:hover .line1{
transform: scale(1);
}
.box1:hover .line2{
transform: scale(1);
}
</style>
</head>
<body>
<div class="box1">
<img src="img/touxiang.png" >
<div class="line1"></div>
<div class="line2"></div>
</div>
</body>
</html>
扭曲:
transform: skewX();
transform: skewY();
transform:skew(x-angle,y-angle)
transform-origin 元素的变换基点
缩写:
ransform:ratate(旋转值) scale(缩放值)skew(扭曲值) translate(移动值);之间用空格隔开
关键帧:
先定义关键帧
@keyframes name{
from{}
to{}
属性值: animation-name: name;/*名称*/
animation-duration: 1s;/*动画的持续时间*/
/*animation-timing-function: linear;*/
/*animation-timing-function: steps(10);/*步数*/
/*animation-delay: 1s;/*延迟*/
animation-iteration-count: infinite;/*动画的播放次数*/
animation-direction: alternate;动画的运动方向
案例:来回跳动的小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes myrun{/*定义关键帧*/
0%{transform: translateX(0);}
25%{transform: translatey(800px);}
50%{transform: translatey(600px);}
75%{transform: translateY(400px);}
100%{transform: translatey(200px);}
}
.box1{
width: 100px;height: 100px;
border-radius: 50%;
background-image: radial-gradient(#fff,#000);
animation-name: myrun;/*名称*/
animation-duration: 1s;/*动画的持续时间*/
/*animation-timing-function: linear;*/
/*animation-timing-function: steps(10);/*步数*/
/*animation-delay: 1s;/*延迟*/
animation-iteration-count: infinite/*无限次*/;/*动画的播放次数*/
animation-direction: alternate/*开始-结束-开始*/;/*reverse(反向运动)/*动画的运动方向*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
缩写:
animation:name(名称)2s(时间)linear(速度)alternate(方向);之间空格隔开