一.CSS3 2D变形
1.tranlate
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
函数 | 描述 |
---|---|
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix(a,b,c,d,e,f)定义了2D的变形,使用了6个值的矩阵。表示如下:
a c e
b d f
0 0 1
matrix用一个三行三列的矩阵表示,a和b列表示x轴,c和d列表示y轴,e和f表示z轴
a和d表示缩放(如果没有缩放,值设为1)
b和c表示扭曲(如果没有扭曲,值为0)
e和f表示位移(如果,没有位移,值为0)
如果旋转角度为θ,他会影响到a,b,c,d的值:
a=cosθ
b=sinθ
c=-sinθ
d=cosθ
如果扭曲skew(θ1,θ2),会影响到b和c的值:
b=tanθ1
c=tanθ2
每次旋转和扭曲都会产生一个新的矩阵,最终形成的 多个矩阵相乘。
如果对一个元素同时由旋转,缩放,扭曲和位移,这时要用形成的多个矩阵相乘,优先考虑旋转和缩放!!!
案列分析:
需求:将div右移100px,下移200px,旋转30度,x轴缩放1.5倍,y轴缩放2倍
方法:
1)缩放(1.5,2)填入矩阵,形成一个矩阵
1.5 0 0
0 2 0
0 0 1
2)旋转30deg,
a=cosθ=cos30=0.866
b=sinθ=0.5
c=-sinθ=-0.5
d=cosθ=0.866
形成一个矩阵:
0.866 -0.5 0
0.5 0.866 0
0 0 1
3)上面两个矩阵相乘
1.5 0 0 0.866 -0.5 0 1.299 -1 0
0 2 0 X 0.5 0.866 0 = 0.75 1.732 0
0 0 1 0 0 1 0 0 1
则
matrix(1.299, .75, -1, 1.732, 100, 200)
注意:matrix函数的位移不用带单位,默认px
2.transform-origin 属性—设置元素的基点
语法
: transform-origin: x-axis y-axis z-axis;
属性值
:
x-axis
:定义视图被置于 X 轴的何处。可能的值:left,center,right,length,%。
y-axis
:定义视图被置于 Y 轴的何处。可能的值:top,center,bottom,length,%。
z-axis
:定义视图被置于 Z 轴的何处。可能的值:length。
3.perspective属性—让子元素获得透视效果,加在父元素上
rspective:length|none
主流浏览器都不支持,谷歌要加-webkit,或者在长度后加单位
.father{
width: 200px;
height: 200px;
margin: 200px auto;
padding: 10px;
border: 1px solid #ff0;
position: relative;
/*-webkit-perspective: 150px;*/
perspective: 100px;
}
.son{
width: 100px;
height: 50px;
padding: 50px;
background-color: #0ff;
position: absolute;
border: 1px solid #444444;
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
transform: rotateX(45deg);
}
4. trasform-style属性,加在父元素上
在 3D 空间中呈现被嵌套的元素.(该属性必须与 transform 属性一同使用)
语法: transform-style: flat|preserve-3d;
属性值:
flat :子元素将不保留其 3D 位置,默认值。
preserve-3d :子元素将保留其 3D 位置。
5.过渡动画-transition 属性
1)常规用法:
transition-property
transition-duration
transition-timing-function
transition-delay
2)简洁(复合)用法:
transition:property-name-list|all duration[这两项不可省略] timing-function delay;
a)可以使用的属性有:
I)颜色
color background-color border-color outline-color
II)位置
background-position left right top bottom
III)长度:
max-height min-height max-width min-width height width border-width margin padding outline-width outline-offset font-size line-height text-indent vertical-align border-spacing letter-spacing word-spacing
IV)数字:
opacity visibility z-index font-weight zoom
V)组合:
text-shadow transform box-shadow clip
VI)其他
gradient(线性和径向)
b)duration:动画持续时间,一般以秒(s)或毫秒(ms)为单位
c)timing-function:动画函数
1)linaer:匀速
2)ease:变速(先慢后快再慢)
3)ease-in:变速:(由慢到快)
4)ease-out:变速(由快到慢)
5)ease-in-out:变速 (慢速开始,慢速结束)
6)cubic-bezier(n,n,n,n);自行设定变速,n的值在0——1之间。
d)动画延时时间,一般以秒(s)或毫秒(ms)为单位
6.关键帧动画
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
步骤:
1)设置关键帧
a)如果只有两个关键帧
@keyframes 动画名 {
0%:{样式表}
100%:{样式表}
}
或者
@keyframes 动画名 {
from:{样式表}
to:{样式表}
}
b)如果是多个关键帧
@keyframes 动画名 {
0%:{样式表}
25%:{样式表}
50%:{样式表}
60%:{样式表}
...
100%:{样式表}
}
注意:这里的百分比一般是升序,可以是%0-100%之间的任意值,也可以是倒叙
b)实施动画
a)常规用法
**animation-name:**来自于@keyframes定义的动画名
**animation-duration:**动画持续时间,一般以秒(s)或毫秒(ms)为单位,(默认为0)
**animation-timing-function:**动画函数
1)linaer:匀速(默认值)
2)ease:变速(先慢后快再慢)
3)ease-in:变速:(由慢到快)
4)ease-out:变速(由快到慢)
5)ease-in-out:变速 (慢速开始,慢速结束)
6)cubic-bezier(n,n,n,n);自行设定变速,n的值在0——1之间。
animation-delay:动画延时时间,一般以秒(s)或毫秒(ms)为单位
**animation-iteration-count:**动画循环播放的次数
1)number:按设定的次数循环(默认次数1次)
2)infinite:一直循环
**animation-direction:**动画播放完是否反向播放
1)normal:不返向(默认值)
2)alternate:反向
animation-play-state:动画播放或停止
1)paused:停止播放
2)running:播放(默认值)
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
b)简介用法:
animation:name duration[必须加] timing-function delay iteration-count direction