CSS3之2D/3D动画
2D的变换
3D的变换
动画
2D动画的变换
基本说明
| 方法名称 | 作用 |
|---|---|
| translate() | 移动元素 |
| rotate() | 旋转元素 |
| scale() | 缩放元素 |
| skew() | 倾斜元素 |
| matrix() | 利用公式改变元素 |
注意：一般要写不同浏览器的适配
transform: ;
-ms-transform: ; /* IE 9 */
-webkit-transform: ; /* Safari and Chrome */
transform-origin:20% 40%; 变换的源点设定
移动位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2d_01</title>
<style type="text/css">
.div1,
.div2 {
width: 100px;
height: 100px;
background: skyblue;
margin: 0px auto;
border: 1px solid black;
}
.div2 {
transform: translate(200px);
}
</style>
</head>
<body>
<div class="div1">
初始位置
</div>
<div class="div2">
移动的位置
</div>
</body>
</html>
效果
缩放
注意
scaleX() 缩放X轴
scaleY() 缩放Y轴
scale() 里面一个参数是X/Y缩放相同，两个参数，第一个是X轴的，第二个是Y轴的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩放</title>
<style type="text/css">
.div1,
.div2 {
width: 100px;
height: 100px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
background-color: skyblue;
float: left;
}
.div2 {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="div1">
原來大小
</div>
<div class="div2">
现在大小
</div>
</body>
</html>
缩放效果
旋转
注意:
transform: rotate(45deg); 绕顺时针旋转
transform: rotateX(45deg); 绕X轴旋转
transform: rotateY(45deg); 绕Y轴旋转
transform: rotateZ(45deg); 绕Z轴旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style type="text/css">
.div1,
.div2{
width: 100px;
height: 100px;
margin: 200px 200px;
margin: 100px;
float: left;
border: 1px solid black;
background-color: skyblue;
}
.div2{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="div1">
初始状态
</div>
<div class="div2">
旋转之后的状态
</div>
</body>
</html>
旋转
倾斜
注意:
transform: skew(45deg); 倾斜的角度，逆时针
transform: skewX(45deg); X轴倾斜
transform: skewY(45deg); Y轴倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倾斜</title>
<style type="text/css">
.div1,
.div2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: skyblue;
margin: 100px 100px;
float: left;
}
.div2{
transform: skew(45deg);
}
</style>
</head>
<body>
<div class="div1">
初始状态
</div>
<div class="div2">
变换状态
</div>
</body>
</html>
倾斜
公式变化matrix()
matrix()里面需要填6个参数，是一个矩阵的算法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公式变换</title>
<style type="text/css">
.div1,
.div2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: skyblue;
margin: 100px 100px;
float: left;
}
.div2{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<div class="div1">
初始状态
</div>
<div class="div2">
变换状态
</div>
</body>
</html>
公式变化
可以实现的效果
照片墙
3D动画的变换
基本属性、方法说明
| 属性 | 参数 | 描述 |
|---|---|---|
| transform | 方法 | 元素的转换方式 |
| transform-origin | X,Y | 从那个位置开始转换 |
| transform-style | - flat preserve-3d |
表示所有子元素在2D平面呈现。 表示所有子元素在3D空间中呈现。 |
| perspective | number none |
元素距离视图的距离，像素单位 默认值 |
| perspective-origin | x-axis y-axis |
<li>默认值50%<li>left<li>center<li>right<li>length<li>% <li>默认值50%<li>top<li>center<li>bottom<li>length<li>% 设置一个3D元素的基数位置 |
| backface-visibility | visible hidden |
背面是可见的 背面是不可见的 |
3D转换方法，与2D使用类似
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
动画
普通动画效果
设置transition属性
transition: all 2s linear;
第一个参数：要改变的值，要是全部都可以变就用all
第二个参数：是此变化需要多少时间完成
第三个参数：以什么样的节奏变化，线性还是慢进快出等样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: skyblue;
transition: all 2s linear;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
效果
帧动画效果
关键的代码成为
第一个参数：关键帧的名字
第二个参数：持续时间
第三个参数：重复的次数或是样式
animation:myfirst 5s 2;
from：初始状态
from：结束状态from和to也可以写成10%{}样式，精确到某个阶段
@keyframes myfirst{
from{
}
to{
margin-left: 200px;
margin-top: 200px;
}
}
效果
属性表
| 属性 | 值 | 描述 |
|---|---|---|
| @keyframes | 名称 持续时间百分比 CSS样式 |
必须 <li>0-100%<li>from<li>to CSS属性 |
| animation | name duration timing-function delay iteration-count direction fill-mode play-state |
关键帧名称 时间 一个周期样式 延迟 次数 是否反向播放 不播放时的样式 是否运行 |
| animation-name | 关键帧名称 | 关键帧名称 |
| animation-duration | 延迟时间 | 默认值为 0，意味着没有动画效果 |
| animation-timing-function | linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) |
匀速 低速开始，然后加快，在结束前变慢 动画以低速开始 动画以低速结束 动画以低速开始和结束 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 |
| animation-delay | time | 延迟时间 |
| animation-iteration-count | n infinite |
规定次数 无限次 |
| animation-direction | normal reverse alternate alternate-reverse initial inherit |
默认值。动画按正常播放。 动画反向播放。 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 设置该属性为它的默认值 从父元素继承该属性 |
| animation-play-state | paused running |
指定暂停动画 指定正在运行的动画 |
网友评论