6、2D转换
转换也是CSS3的特性之一,可以实现元素的位移translate
、旋转rotate
、缩放scale
等效果
所谓2D转换是指二维平面内进行转换
6.1 移动
transform:translate(x, y);
/* 或者分开写 */
transform:translateX(n);
transform:translateY(n);
注意:
-
translate
不会影响到其它元素的位置,不脱标,但是会覆盖其它元素,类似相对定位 -
translate
百分比单位是相对自身的translate(50%, 50%)
- 切记:对行内标签没有效果
6.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针或逆时针旋转
/* 旋转45度 */
transform: rotate(45deg)
- 默认的旋转中心是元素的中心
6.3 转换中心 transform-origin
transform-origin
用来设置转换的中心
transform-origin: x y;
- 参数x,y是用空格隔开的
- x, y ,默认是元素的中心点(50%, 50%)
- x,y 可以是像素点 或 方位词
6.4 缩放 scale
scale
可以放大或缩小元素
transform: scale(x, y);
- x,y 是用逗号隔开
-
scale(1, 1)
:宽和高都放大一倍,可简写成scale(1)
- 相应的
scale(0.5)
就是缩小一倍 - 不影响其它盒子
6.5 2D综合写法
tranform:translate() rotate() scale();
- 先转换会改变坐标轴方向
- 当我们同时有唯一和其它属性的时候,记得要将位移放到最前面
7、3D转换
先说下规则:
只有y轴比较特殊,是垂直向下的
- x轴 :水平向右 注意:x右边是正值,左边是负值
- y轴:垂直向下 注意:y下面是正值,上面是负值
- z轴:垂直屏幕 注意:往外是正值,往里面是负值
3D平时最常用的就是3D位移和3D旋转,而且3D一般都会结合透视
- 3D位移:
translate3d(x,y,z)
- 3D旋转:
rotate3d(x,y,z)
- 透视:
perspective
- 3D呈现
transform-style
7.1 3D移动 translate3d
/* 仅仅是在X轴上移动 */
transform:translateX(100px)
/* 仅仅在Y轴上移动 */
transform:translateY(100px)
/* 仅仅在Z轴上移动 */
transform:translateZ(100px)
/* 其中x,y,z 分别指要移动的轴的方向的距离 */
transform:translate3d(x, y, z)
7.2 透视 prespective
prespective
就是在二维的平面产生远大近小的视觉立体
- 如果想在网页中产生3D效果需要透视(劣迹成3d投影到2d)
- 透视我们也称为视距:视距是人的眼睛到屏幕的距离,其单位是像素
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
让物体变大有两种方法:
- 透视变小:就眼睛离物体距离变小
- z 轴变大:物体距离的成像平面距离变大(靠近眼睛)
透视写在被观察父盒子的上面
body {
/* 透视写到被观察父元素盒子的上面, 透视越小,盒子越大 */
perspective: 150px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
transform: translate3d(500px, 100px, 100px)
}
7.3 3D旋转 rotate3d
3d旋转是可以让元素在三维平面内沿着x、y、z轴或者 自定义轴进行旋转
/* 沿着X轴正方向旋转45度 */
transform:translateX(45deg)
/* 沿着Y轴正方向旋转45度 */
transform:translateY(45deg)
/* 沿着Z轴正方向旋转45度 */
transform:translateZ(45deg)
/* 沿着自定义轴旋转,deg为角度度(了解即可) */
transform:translate3d(x, y, z)
左手定则:
- 左手的手拇指指向x/y轴的正方向
- 其余手指的弯曲方向就是该方向沿着x/y轴旋转的方向
栗子:鼠标经过盒子 盒子转动
.demo2 {
width: 100px;
height: 100px;
background-color: blue;
transition: all 2s;
}
.demo2:hover {
transform: rotateZ(360deg);
}
7.4 3D呈现 transform-style
- 控制子元素是否开始三维立体三维环境
-
transform-style: flat;
子元素不开启3D立体空间(默认的) -
transform-style: preserve-3d;
:子元素开启立体空间 - 代码写给父级,但是影响的是子盒子
- 这个属性很重要
8、动画
动画是CSS3具有的特征之一,可以通过设置多个节点来精准控制一组动画,常用来实现复杂的动画效果
8.1 基本使用步骤
制作动画分两步:
- 先定义
- 再使用
1、用 @keyframes
定义动画
@keyframes move {
/* 开始的地方 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 400px);
}
75% {
transform: translate(0, 400px);
}
100% {
transform: translate(0, 0);
}
}
- 0% 是动画的开始,100%是动画的完成
- 建议用百分比来规定变化发生的时间,如果只有开始和结束,也可以用关键词
from
和to
,等同于0%
和100%
注意:每一段动画的时间是平分的,所以为了让动画顺畅,一般让每段移动的距离都相同
2、 调用动画
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 3s;
}
8.2 常用属性
属性 | 描述 |
---|---|
@keyframes |
规定动画属性 |
animation |
所有动画属性的简写属性,除了 animationplay-state 属性 |
animation-name |
规定 @keyframes 动画的名称 |
animation-druation |
规定动画完成一个周期所花费的秒或毫秒,默认是0 (必须的) |
animation-timeing-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-name
和 animation-druation
是必须的
animation-play-state
一般与鼠标点击或者经过一起使用
8.3 速度曲细节
animation-timing-function
:规定动画速度曲线
值 | 描述 |
---|---|
linear |
动画从头到尾的速度是相同的,均匀 |
ease |
默认。动画以低速开始,中间加快,在结束前变慢 |
ease-in |
动画以低速开始 |
ease-out |
动画以低速结束 |
ease-in-out |
动画以低速开始和结束 |
steps() |
指定了时间函数中的间隔数量 |
8.4 属性简写
animation
: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
animation:myfirst 5s linear 2s infinite alternate;