1、2D、3D转换
通过除css3转换,能够对元素进行移动、缩放、转位、拉长或伸缩等。转换是使元素改变形状、尺寸和位置的一种效果。可以使用2D、3D来转换元素。
2D转换方法:
translate():移动
rotate():旋转
scale():缩放
skew():倾斜
3D转换方法:
rotateX()
rotateY()
首先,创建HTML文件index.html,以便于进行css的演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>初始效果</div>
<br/>
<div class="div2">改变后效果</div>
</body>
</html>
然后创建一个CSS样式表style.css,并对div设置基本样式(为节省地方,将数值设置较小)
div{
width: 50px;
height: 50px;
background-color: red;
}
此时得到的基本结果为:
下面将进行对div2进行动画效果的设置
1.translate
.div2{
transform: translate(50px,50px);
-webkit-transform: translate(50px,50px);/*safari chrome*/
-ms-transform: translate(50px,50px);/*IE*/
-o-transform: translate(50px,50px);/*opera*/
-moz-transform: translate(50px,50px);/*Firefox*/
}
可以看到下面的盒子相对于原来分别向右向下移动了50px。最后四句是对于不同浏览器的适配进行的设置,注释中有写出对应的主流浏览器。
2.rotate(参数为旋转度数)
.div2{
transform: rotate(120deg);
-webkit-transform: rotate(120deg);/*safari chrome*/
-ms-transform: rotate(120deg);/*IE*/
-o-transform: rotate(120deg);/*opera*/
-moz-transform: rotate(120deg);/*Firefox*/
}
可以看到下面的盒子旋转了120度。
3.scale (参数为缩放倍数)
.div2{
margin-top: 30px;
transform: scale(1,2);
-webkit-transform: scale(1,2);/*safari chrome*/
-ms-transform: scale(1,2);/*IE*/
-o-transform: scale(1,2);/*opera*/
-moz-transform: scale(1,2);/*Firefox*/
}
可以看到改变后的div2宽度不变,高度变为原来的二倍。
4.skew (参数是围绕X轴旋转的度数和围绕Y轴旋转的度数)
.div2{
transform:skew(20deg, 20deg);
-webkit-transform: skew(20deg, 20deg);/*safari chrome*/
-ms-transform: skew(20deg, 20deg);/*IE*/
-o-transform: skew(20deg, 20deg);/*opera*/
-moz-transform: skew(20deg, 20deg);/*Firefox*/
}
3D的转换效果
1.rotateX
.div2{
transform:rotateX(50deg);
-webkit-transform: rotateX(50deg);/*safari chrome*/
-ms-transform: rotateX(50deg);/*IE*/
-o-transform:rotateX(50deg);/*opera*/
-moz-transform: rotateX(5deg);/*Firefox*/
}
2.rotateY
.div2{
transform:rotateY(50deg);
-webkit-transform: rotateY(50deg);/*safari chrome*/
-ms-transform: rotateY(50deg);/*IE*/
-o-transform:rotateY(50deg);/*opera*/
-moz-transform: rotateY(50deg);/*Firefox*/
}
可以看到3D的转换效果rotateX和rotateY分别从横向和纵向实现了压缩。
2、过渡效果
通过css3可以给元素添加一些效果,css3过渡是元素从一种样式转换成另一种样式,主要包括动画效果的css以及动画执行的时间
属性:
transition:设置四个过渡属性
transition-property:过渡的名称
transition-duration:过渡效果花费的时间
transition-timing-function:过渡效果的时间曲线
transition-delay:过渡效果开始时间
创建一个新的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>效果展示</div>
</body>
</html>
对div进行样式设置
div{
width: 50px;
height: 50px;
background-color: aqua;
transition: width 2s, height 2s,-webkit-transform 2s;
-webkit-transition: width 2s, height 2s,-webkit-transform 2s;/*safari chrome*/
-ms-transition: width 2s, height 2s,-webkit-transform 2s;/*IE*/
-o-transition:width 2s, height 2s,-webkit-transform 2s;/*opera*/
-moz-transition: width 2s, height 2s,-webkit-transform 2s;/*Firefox*/
}
div:hover{
width: 100px;
height: 100px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);/*safari chrome*/
-ms-transform: rotate(360deg);/*IE*/
-o-transform:rotate(360deg);/*opera*/
-moz-transform: rotate(360deg);/*Firefox*/
}
div{}对变化之前的元素进行样式设定,并设定过渡属性(直接使用简便方式设置四个属性)
div:hover{}设置当鼠标放置在元素上并过渡后的元素大小以及旋转的度数。
图中展示了元素在过渡过程中的一个状态,因为是动态效果不便于展示。
3、动画效果
通过css3也可以进行创建动画,css3的动画需要遵循@keyframes规则。主要要规定动画的时长和名称。
html文件body中同样只有一个div
对div样式设置为:
div{
width: 50px;
height: 50px;
background-color: aqua;
position: relative;
animation: anim 5s;
-webkit-animation: anim 5s;
}
@keyframes anim{
0%{background: aqua;left: 0px;top: 0px}
25%{background: mediumvioletred;left: 100px;top: 0px}
50%{background: blue;left: 100px;top: 100px}
75%{background: chartreuse;left: 0px;top: 100px}
100%{background: aqua;left: 0px;top: 0px}
}
@-webkit-keyframes anim{
0%{background: aqua;left: 0px;top: 0px}
25%{background: mediumvioletred;left: 100px;top: 0px}
50%{background: blue;left: 100px;top: 100px}
75%{background: chartreuse;left: 0px;top: 100px}
100%{background: aqua;left: 0px;top: 0px}
}
结果为元素进行右左下上的动画移动。