CSS3（二）

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轴比较特殊，是垂直向下的

1. x轴 ：水平向右 注意：x右边是正值，左边是负值
2. y轴：垂直向下 注意：y下面是正值，上面是负值
3. z轴：垂直屏幕 注意：往外是正值，往里面是负值

3D平时最常用的就是3D位移和3D旋转，而且3D一般都会结合透视

1. 3D位移：translate3d(x,y,z)
2. 3D旋转：rotate3d(x,y,z)
3. 透视：perspective
4. 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 就是在二维的平面产生远大近小的视觉立体

1. 如果想在网页中产生3D效果需要透视（劣迹成3d投影到2d）
2. 透视我们也称为视距：视距是人的眼睛到屏幕的距离，其单位是像素
3. 距离视觉点越近的在电脑平面成像越大，越远成像越小

让物体变大有两种方法：

1. 透视变小：就眼睛离物体距离变小
2. 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)

左手定则：

1. 左手的手拇指指向x/y轴的正方向
2. 其余手指的弯曲方向就是该方向沿着x/y轴旋转的方向

栗子：鼠标经过盒子 盒子转动

.demo2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: all 2s;
}

.demo2:hover {
    transform: rotateZ(360deg);
}

7.4 3D呈现 transform-style

1. 控制子元素是否开始三维立体三维环境
2. transform-style: flat; 子元素不开启3D立体空间（默认的）
3. transform-style: preserve-3d; ：子元素开启立体空间
4. 代码写给父级，但是影响的是子盒子
5. 这个属性很重要

8、动画

动画是CSS3具有的特征之一，可以通过设置多个节点来精准控制一组动画，常用来实现复杂的动画效果

8.1 基本使用步骤

制作动画分两步：

1. 先定义
2. 再使用

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);
    }
}

1. 0% 是动画的开始，100%是动画的完成
2. 建议用百分比来规定变化发生的时间，如果只有开始和结束，也可以用关键词 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;