Html5动画效果
这篇文章涉及到的内容有:
2D,3D的转换
过度效果
动画
多列
1.2D,3D转化
2D,3D转化是指对元素的外观进行一些操作,例如:
- 移动元素
- 旋转
- 缩放
- 倾斜
- 3D转换
接下来以代码来演示如何进行2D,3D平面的一些转换。
准备工作
我们先准备一个标准的html页面,并在其中添加两个相同大小的div元素,方便进行对比。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>这是一个初始效果</div>
<br>
<div class="div2">准备改变的div</div>
</body>
</html>
建立对应的样式表,并给两个div设置相同的样式:
div {
width: 100px;
height: 100px;
background-color: aqua;
}
在浏览器中预览(我用的是Chrome浏览器),可以看到未进行变换的效果:
- 移动变换:
.div2 {
/*移动效果*/
transform: translate(100px, 100px);
-webkit-transform: translate(100px, 100px); /*safari chrome*/
-ms-transform: translate(200px, 100px); /*IE*/
-o-transform: translate(200px, 100px); /*Opera*/
-moz-transform: translate(200