CSS3 Integrated Part
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放
The displacement (position change element)
translate(x,y)
定义 2D 转换，沿着 X 和 Y 轴移动元素。
例如:
.box {
transform: translate(100px, 200px);
}
使用方式介绍:
基本写法:
transform: translate(length, length);
总结:
1. 最多能设置两个值, 一个值用来改变水平,另外一个一个值用来改变垂直方向
2. 如果设置两个值,第一个值代表水平,第二值代表垂直
3. 如果希望让元素逆方向移动,可以设置负数
4. 通过位移方式改变元素位置,设置的值就是相对元素本身宽度和高度(可以设置百分比)
5. 如果设置一个值,那么元素只能在水平方向移动
2D displacement way to achieve positioning element centered
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Rotation
rotate(angle)
定义 2D 旋转，在参数中规定角度。
基本使用:
transform: rotate(angle)
总结:
1. 设置的值代表旋转的角度(单位deg)
2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
✔ 设置方式可以使用以下方式:
transform-origin: left bottom;
transform-origin: 100px 100px;
例如:
transform: rotate(-45deg);
to sum up
1. 旋转圆点
2. 顺时针旋转,逆时针旋转
Zoom (change element size)
scale(x,y)
定义 2D 缩放转换，改变元素的宽度和高度。
to sum up
基本使用方式:
transform: scale(0, 0);
总结:
1. 最多能设置两个值,一个值用来改变宽度,另外一个值用来改变 高度
2. 设置缩放的时候,不需要带单位,代表的是倍数
3. 第一个值代表宽度,第二个值代表高度
4. 如果希望元素缩小,那么设置的值在 0 - 1 之间的小数
5. 如果设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数
Tilt (understand)
skew ( x-angle , y-angle )
定义 2D 倾斜转换，沿着 X 和 Y 轴。
to sum up
注意: transform 是一个复合属性,如果设置多个值,那么需要按照复合属性的写法去写;
transform: translate(600px) rotate(360deg) scale(0.5, 0.5);
3D coordinate system
☞ 坐标系:
x 轴 : 从左向右
y 轴: 从上向下
z 轴: 指向我们自己的眼睛
☞ 左手法则:
Displacement
translateX(n)
让元素沿着x轴移动
正数: 从左向右
负数: 从右向左
translateY(n)
让元素沿着Y轴移动
正数: 从上向下
负数: 从下向上
translateZ(n)
让元素沿着Z轴移动
正数: 朝向我们视线移动
负数: 背向移动
总结:
1. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度
2. 可以通过3D转方式实现元素居中:
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
3D perspective
☞ 近大远小
☞ perspective设置方式及取值
✔ 给设置了transform属性元素的直接父元素设置透视即可
Rotation
rotateX()
沿着x轴旋转
rotateY()
沿着Y轴旋转
rotateZ()
沿着Z轴旋转
Scaling
scaleX()
沿着x轴放到或缩小
scaleY()
沿着Y轴放到或缩小
tilt
skewY ()
沿着Y轴倾斜
skewX()
沿着X轴倾斜
Animation (animation)
☞ animation:(补间动画) , 可以让元素始终保存一个动画的效果,不需要用户的动作
☞ transition:(补间动画), 必须要有用户的动作,动画才可以执行
语法:
@keyframes 动画序列名称 {
from {
开始状态
}
to {
结束状态
}
}
或者
@keyframes 动画序列名称 {
0%{
开始状态
}
100%{
结束状态
}
}
例如:
.one {
动画调用
animation-name: one_move;
动画执行时间
animation-duration: 2s;
}
/* 定义动画集(序列) */
@keyframes one_move {
/* 设置开始状态 */
from {
transform: translateX(0px);
}
/* 设置结束状态 */
to {
transform: translateX(800px);
}
}
动画属性合写:
animation: move 2s infinite alternate linear 1s;
1. 必须设置 animation-name 和 animation-duration
2. 没有顺序的要求
Animation properties
| @keyframes |
Custom Animation |
| animation-name |
It specifies the name of @keyframes animation. |
| animation-duration |
The provisions of the animation takes time to complete a cycle. |
| animation-timing-function |
Prescribed speed of the animation curve. The default is "ease". |
| animation-delay |
When the provisions of animation begins. The default is 0. |
| animation-iteration-count |
Provisions Animations are played. The default is 1. There are infinite |
| animation-direction |
Are reverse animation playing in the next cycle. The default is "normal", alternate reverse play |
| animation-play-state |
Whether the provisions of the animation is running or paused. The default is "running". There are "paused" |
| animation-fill-mode |
After the animation state regulations, keeping forwards back to the beginning backwards |
| animation |
Shorthand property for all animation properties |
Private prefix (understand)
浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。 因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。
| Trident |
-ms- |
Internet Explorer |
| Gecko |
-moz- |
Firefox |
| Webkit |
-webkit- |
Chrome、Opera、Safari、Android |
| Presto |
-The- |
Early Opera |
.box{
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
/*推荐使用 先前缀后标准 顺序*/