前端——HTML5CSS3提高——新增特性（二）

1. 2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换可以简单理解为变形。
·移动：translate
·旋转：rotate
·缩放：scale

1.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先学习二维坐标系。

1.2 2D转换之移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

1.语法

transform：translate（x,y）;或者分开写
transform：translate（n）;
transform：translate（n）;

 <style>
        /* 移动盒子的位置：定位  盒子的外边距  2d转换移动 */
        div {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            /* x就是在x轴上移动位置，y就是y轴上移动位置，中间用逗号隔开 */
            /* transform: translate(x,y); */
            /* transform: translate(100px, 100px); */
            /* 如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
        }

        div:first-child {
            background-color: pink;
            transform: translate(30px, 30px);
        }

        div:last-child {
            background-color: purple;
        }
    </style>

2. 重点

· 定义2D转换中的移动，沿着X和Y轴移动元素
· translate最大的优点：不会影响到其他元素的位置
· translate中的百分比单位是相对于自身元素的translate:(50%，50%);
· 对行内标签没有效果。

1.3 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。

1. 语法

transform:rotate(度数);

2. 重点

· rotate里面跟度数，单位是deg，比如rotate(45deg)
· 角度为正时，顺时针，负时，为逆时针
· 默认旋转的中心点是元素的中心点

 <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 1s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>

1.4 2D转换中心点transform-origin

我们可以设置元素转换的中心点

1. 语法

transform-origin:x y;

2. 重点
   · 注意后面的参数x和y用逗号隔开
   · x y默认转换的中心点是元素的中心点（50% 50%）
   · 还可以给x y设置像素或者方位名词（top bottom left right center）

 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以和方位名词 */
            transform-origin: left bottom;
            /* 2.默认的是50% 50% 等价于center center */
            /* 3.可以是px 像素 */
            transform-origin: 50px 50px;
        }

        div:hover {
            transform: rotate(360deg);
        }

1.5 2D转换之缩放scale

缩放，顾名思义，可以放大和缩小，只要给元素添加上这个属性就能控制他放大还是缩小

1. 语法

transform:scale(x,y);

2. 重点

· 注意其中的x和y用逗号分隔
· transform:scale(1,1):宽和高都放大一倍，相对于没有放大
· transform:scale(2,2)：宽和高都放大2倍
· transform:scale(2)：只写一个参数，第二个参数和第一个参数一样，相当于scale（2,2）
· transform:scale(0.5,0.5)：缩小
· scale缩放最大的优势，可以设置转换中心点缩放，默认是以中心点缩放，而且不影响其他盒子

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
            transform-origin: left bottom;
        }

        div:hover {
            /* 1.里面写的数字不跟单位，就是倍数的意思 */
            /* transform: scale(x,y); */
            transform: scale(1, 1);
        }
    </style>

1.6 2D转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform:translate() rotate() scale()…等
2. 其顺序会影响转换效果（先旋转会改变坐标轴方向）
3. 当同时有位移和其他属性时，记得要将位移放到最前

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }

        div:hover {
            /* 同时有位移和其他属性时，需要把位移放到最前面 */
            transform: translate(100px, 100px) rotate(180deg) scale(1.2);
        }
    </style>

1.7 2D转换总结

1. 转换transform简单理解就是变形，有2D和3D
2. 目前暂且学了位移、旋转和缩放
3. 2D移动translate(x，y)，最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
4. 可以分开比如translateX（x）和translateY（y）
5. 2D旋转rotate（度数），可以实现旋转元素，度数单位是deg
6. 2D缩放scale（x，y），里面参数是数字则不跟单位，可以是小数，最大的优势是不影响其他盒子
7. 设置转换中心点transform-origin：x,y;参数可以百分比、像素或者是方位名词
8. 当我们进行综合写法，同时有位移和其他属性时，要把位移放到最前。

2. 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置过个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

2.1 动画的基本应用

制作动画分为两步：

1. 先定义动画
2. 再使用（调用）动画

2.1.1 用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
	0% {
			width:100px;
		}
	100% {
			width:200px;
		}
}

动画序列

· 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列

· 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

· 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数

· 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

2.1.2 元素使用动画

div {
		width:200px;
		height:200px;
		background-color:pink;
		margin: 100px auto;
		/*调用动画*/
		animation-name: 动画名称;
		/*持续时间*/
		animation-duration:持续时间;
}

<style>
        /* 我们想一打开页面，一个盒子就从左边走到右边 */
        @keyframes move {

            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>

keyframes可以做多个状态的变化

 /* 1.可以做多个状态的变化，keyframes关键帧 */
        /* 2.里面的百分比需要是整数 */
        /* 3.百分比就是总的时间的划分 */
        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        /* 动画序列 */
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 4s;
        }

2.2 动画常用属性

<style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(1000px, 0);
            }
        }

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 运动曲线 */
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 0.3s;
            /* 重复次数 count 次数 infinit 无限*/
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是normal 反方向则为alternate*/
            /* animation-direction: alternate; */
            /* 动画结束后，默认的是backwards回到起始状态，可以停留在结束状态forwards */
            animation-fill-mode: forwards;
        }

        div:hover {
            /* 鼠标经过div，停止动画，鼠标离开继续动画 */
            animation-play-state: paused;
        }
    </style>

2.3 动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态;

animation: move 2s 0.5s 1 alternate forwards;

· 简写属性里面不包含animation-play-state
· 暂停动画：animation-play-state：paused;经常和鼠标经过等其他配合使用
· 想要动画走回来，而不是跳回来：animation-direction：alternate
· 盒子动画结束后，停在结束为止：animation-fill-mode：forwards;

2.4 速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”；

<style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* steps就是分几步来完成动画，有了steps就不需要写ease和linear */
            animation: w 4s steps(10) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 200px;
            }
        }
    </style>

3. 3D转换

特点： 近大远小；物体后面遮挡看不见

3D转换最常用的是3D位移和3D旋转

主要知识点
· 3D位移：translate3d(x,y,z)
· 3D旋转：rotate3d(x,y,z)
· 透视：perspective
· 3D呈现transform-style

3.1 三维坐标系

三维坐标系指的是立体空间，立体空间是由3个轴共同组成的

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

3.2 3D位移translate3d

3D移动在2D移动的基础上增加了一个可以移动的方向，z轴方向

· transform：translateX（100px）：仅仅是在x轴上移动
· transform：translateY（100px）：仅仅是在y轴上移动
· transform：translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px为单位）
· transform：translate3d（x,y,z）：其中x、y、z分别指要移动的轴的距离

3.3 透视perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的。

· 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面上）
· 模拟人类的视觉位置，可认为安排一只眼睛去观看
· 透视我们也成为视距：视距就是人的眼睛到屏幕的距离
· 距离视觉点越近的电脑平面成像越大，越远成像越小
· 透视的单位是像素

透视写在被观察元素的父盒子上
d：视距，视距就是人的眼睛到屏幕的距离
z：z轴，物体距离屏幕的距离，z轴越大，看到的物体越大

<style>
        body {
            perspective: 500px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            transform: translate3d(400px, 100px, 200px);
        }
    </style>

3.4 translateZ
transform:translateZ(100px):仅仅是在z轴上移动。有了透视，就能看到translateZ引起的变化

3.5 3D选装rotate3d
3D旋转指可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转

语法：
· transform:rotateX(45deg):沿着x轴正方向旋转45度
· transform:rotateY(45deg):沿着y轴正方向旋转45度
· transform:rotateZ(45deg):沿着z轴正方向旋转45度
· transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

rotateX

对于元素的旋转方向判断，需要先学习一个左手准则

左手准则：

· 左手的大拇指指向x轴的正方向
· 其余手指弯曲方向就是该元素沿着x轴旋转的方向

rotateY

对于元素的旋转方向判断，需要先学习一个左手准则

左手准则：

· 左手的大拇指指向x轴的正方向
· 其余手指弯曲方向就是该元素沿着y轴旋转的方向（正值）

rotate3d

· transform:rotate(1,0,0,45deg)沿着x轴旋转45度
· transform:rotate(1,1,0,45deg)沿着对角线旋转45度

3.6 3D呈现transform-style

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

<style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(80deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(88deg);
        }
    </style>

4. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加

4.1 私有前缀

· -moz-：代表firefox浏览器私有属性
· -ms-：代表ie浏览器私有属性
· -webkit-：代表safari、chrome私有属性
· -o-：代表Opera私有属性

4.2 提倡写法