CSS3综合部分
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放
位移(改变元素位置)
-
translate(x,y)
定义 2D 转换，沿着 X 和 Y 轴移动元素。
例如:
.box {
transform: translate(100px, 200px);
}
使用方式介绍:
基本写法:
transform: translate(length, length);
总结:
1. 最多能设置两个值, 一个值用来改变水平,另外一个一个值用来改变垂直方向
2. 如果设置两个值,第一个值代表水平,第二值代表垂直
3. 如果希望让元素逆方向移动,可以设置负数
4. 通过位移方式改变元素位置,设置的值就是相对元素本身宽度和高度(可以设置百分比)
5. 如果设置一个值,那么元素只能在水平方向移动
-
2D位移方式实现定位元素居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
旋转
-
rotate(angle)
定义 2D 旋转，在参数中规定角度。
基本使用:
transform: rotate(angle)
总结:
1. 设置的值代表旋转的角度(单位deg)
2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
✔ 设置方式可以使用以下方式:
transform-origin: left bottom;
transform-origin: 100px 100px;
例如:
transform: rotate(-45deg);
-
总结
1. 旋转圆点
2. 顺时针旋转,逆时针旋转
缩放(改变元素大小)
-
scale(x,y)
定义 2D 缩放转换，改变元素的宽度和高度。
-
总结
基本使用方式:
transform: scale(0, 0);
总结:
1. 最多能设置两个值,一个值用来改变宽度,另外一个值用来改变 高度
2. 设置缩放的时候,不需要带单位,代表的是倍数
3. 第一个值代表宽度,第二个值代表高度
4. 如果希望元素缩小,那么设置的值在 0 - 1 之间的小数
5. 如果设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数
倾斜(了解)
-
skew(x-angle,y-angle)
定义 2D 倾斜转换，沿着 X 和 Y 轴。
-
总结
注意: transform 是一个复合属性,如果设置多个值,那么需要按照复合属性的写法去写;
transform: translate(600px) rotate(360deg) scale(0.5, 0.5);
3D坐标系
☞ 坐标系:
x 轴 : 从左向右
y 轴: 从上向下
z 轴: 指向我们自己的眼睛
☞ 左手法则:
位移
-
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设置方式及取值
✔ 给设置了transform属性元素的直接父元素设置透视即可
旋转
-
rotateX()
沿着x轴旋转
-
rotateY()
沿着Y轴旋转
-
rotateZ()
沿着Z轴旋转
缩放
-
scaleX()
沿着x轴放到或缩小
-
scaleY()
沿着Y轴放到或缩小
倾斜
-
skewY()
沿着Y轴倾斜
-
skewX()
沿着X轴倾斜
动画(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. 没有顺序的要求
动画属性
| 属性 |
描述 |
| @keyframes |
定义动画 |
| animation-name |
规定 @keyframes 动画的名称。 |
| animation-duration |
规定动画完成一个周期所花费的时间。 |
| animation-timing-function |
规定动画的速度曲线。默认是 "ease"。 |
| animation-delay |
规定动画何时开始。默认是 0。 |
| animation-iteration-count |
规定动画被播放的次数。默认是 1。还有 infinite |
| animation-direction |
动画是否在下一周期逆向地播放。默认是 "normal"，alternate逆播放 |
| animation-play-state |
规定动画是否正在运行或暂停。默认是 "running"。还有“paused” |
| animation-fill-mode |
规定动画结束后状态，保持 forwards 回到起始 backwards |
| animation |
所有动画属性的简写属性 |
私有前缀(了解)
浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。 因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。
| 内核 |
前缀 |
主要浏览器 |
| Trident |
-ms- |
Internet Explorer |
| Gecko |
-moz- |
Firefox |
| Webkit |
-webkit- |
Chrome、Opera、Safari、Android |
| Presto |
-o- |
早期Opera |
.box{
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
/*推荐使用 先前缀后标准 顺序*/
