CSS3 变形/变换
只能用块状元素或者inline-block;
相关属性
- transform 设置或检索对象的转换
- transform-origin 设置以某个原点进行转换
- transform-style: flat/preserve-3d 指定某元素的子元素是位于三维空间内，还是平面
- perspective: 长度单位 指定观察者与【z=0】平面的距离
- perspective-origin 设置透视点的位置
- backface-visibialbe: visible/hidden 指定元素背面面向用户时是否可见
变形方法 transform-function
-
2d位移
- translate()
- translatex()
- translatey()
-
2d缩放
- scale(数字)
- scalex()
- scaley()
-
2d旋转
- rotate()
-
2d扭曲
- skew(x,y)
- skewx()
- skewy()
-
3d
- translatez()
- translate3d()
- scalez()
- scale3d()
- rotatex()
- rotatey()
- rotatez()
CSS过渡
相关属性
- trasition
- transition-property 指定哪些属性过渡 如果有多个值中间以逗号分隔
-
all默认所有
-
none 不设置属性过渡
哪些css属性可以被过渡： 颜色值、具有长度值、百分比的属性、 值是数字的属性 如 z-index opacity outline-offset等 变形系列属性 阴影 渐变
-
- transition-timing-function 过渡类型
- ease 平滑过渡
- linear 线性过渡
- ease-in 由慢到快
- ease-out 由快到慢
- ease-in-out 由慢到快在到慢
- transition-duriation 设置对象过渡的持续时间
- transition-delay 延迟过渡时间
触发时机
- 伪类选择器
- JS
- 媒体查询
CSS3 动画
相关属性
-
animation
-
animation-name 动画名称
必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 -
animation-duration 设置对象动画的持续时间
-
animation-timing-function 设置对象动画的过渡类型
* ease 平滑过渡 * linear 线性过渡 * ease-in 由慢到快 * ease-out 由快到慢 * ease-in-out 由慢到快在到慢 -
animation-delay 指定对象动画的延迟时间
-
animation-iteration-count number动画循环次数
默认一次 、 infinite：无限次 -
animation-diretion 设置对象动画在循环中是否反向运动
normal 默认正常反向 reverse：反方向运行 alternate:动画先正常运行在反向运行，并持续交替运行 -
animation-play-state: 设置对象动画才状态 running/pasused
-
animation-fill-mode: 设置对象动画时间之外的状态
none：默认 forwards 设置状态为动画结束时的状态 backgrounds:设置状态为动画开始时的状态。
关键帧
#keyframes 动画名称{
form{
}
to{
}
}
动画应用（车轮滚动）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画相关属性</title>
<style>
@keyframes mymation{
from{
margin-left: 0px;
transform:rotate(0deg);
}
to{
margin-left: 1000px;
transform:rotate(720deg);
}
}
.box{
200px;
height:200px;
border-radius:100px;
background:url(./lun.jpg);
background-size: 100% 100%;
animation-name:mymation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay:1s;
animation-iteration-count: 2;
animation-fill-mode:forwards;
animation-direction:alternate;
}
.box:hove
animation-play-state:paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>