前端HTML、CSS--11（CSS-8）

目录：

·CSS3 属性选择器

·CSS3 结构伪类选择器

·CSS3 伪元素选择器

·CSS3 2D转换

·CSS3 动画

·CSS3 3D转换

·浏览器私有前缀

4. 2D转换

转换（transform）是CSS3中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等效果。

转换你可以简单理解为变形。

· 移动：translate

· 旋转：rotate

· 缩放：scale

4.1 二维坐标系

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

x轴 水平向右  ，y轴垂直向下，注意哟

4.2 2D 转换之移动 translate

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

移动盒子的位置我们现有：定位、盒子的外边距、2D转换移动

1.语法：

transform：translate（x,y); 

 x即x轴方向上移动x个位置，y即y轴方向上移动y个位置

或者分开写

transform：translateX（n); 

transform：translateY（n); 

2.重点

·定义2D转换中的移动，沿着x和y轴移动元素

·translate最大的优点：不会影响到其它元素的位置。不同于定位和外边距会影响其它元素的位置。

·translate中的百分比单位是相对于自身元素的translate:(50%,50%）;

比如我们一个大盒子里面套着一个小盒子，小盒子原先在大盒子左上角，现在我们想要小盒子在大盒子里垂直居中，我们之前可以用外边距或者定位。用定位的时候是这样，先子绝父相，然后top：50%；left：50%；这里的50%是走父盒子的50%，所以小盒子此时在大盒子偏右下角，然后再让小盒子走自身宽高的一半，即如果小盒子宽200高200，那么就margin-top：-100px;  margin-left:-100px;  即可达到垂直居中。但是这个缺点是当小盒子宽高改变时，margin-top和margin-left就要修改。

如果用translate，这一步直接transform:translate(-50%,-50%); 盒子往上走和往左走自身长度的一半，小盒子宽高改变时，就不用再去调整。

·对行内标签没有效果

4.3 2D转换之旋转rotate

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

1.语法：

transform：rotate（度数）；

2.重点：

·rotate里面跟度数，单位是deg比如rotate（45deg)；

·角度为正时，顺时针，负时，为逆时针

·默认旋转的中心点是元素的中心点

例子：我想做一个我一点击这个图片它就旋转360度怎么做？

CSS3--书写三角箭头

我们之前的三角一般都是用字体图标，现在我们还可以用代码写出这个三角。

用伪元素，伪元素也是一个盒子嘛，给它宽高，然后例如给出一个左边框和下边框，然后再旋转45度即可得到一个指向下的三角箭头。

用CSS3做的话，还可以做当鼠标经过的时候让这个三角箭头旋转。当然如果想要看到过程可以加上过渡。

4.4 2D转换中心点transform-origin

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

1.语法：

transform-origin：x y；

2.重点：

·注意后面的参数x和y用空格隔开

·x y默认转换的中心点是元素的中心点（50% 50%）

·还可以给x y设置像素或者方位名词（top bottom left right center)

案例：也经常用

 4.5 2D转换之缩放scale

缩放就是放大和缩小。只要给这个元素加上了这个书写就能控制它放大或缩小。

1.语法：

transforom:scale(x,y);

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）；缩小

·sacle缩放最大的优势：可以设置转换中心点，默认以转换中心点缩放的，而且不影响其它盒子。

以前直接修改高度宽度就可能会影响其它盒子，而且是只能往下往左右改变宽高。【】【、

例如：

 要是想固定其在某盒子内放大就添加溢出隐藏即可

分页案例：

4.6 2D转换综合写法 

注意：

1.同时使用多个转换，其格式为：transform:translate() rotate() scale() ...等，注意空格隔开

2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

3.当我们同时有位移和其它属性的时候，记得要将位移放到最前面

5.动画

动画（animation）是CSS3中最具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

5.1 动画的基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

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

@keyframes 动画名称 {

       0%{

               width：100px;

       }

       100%{

               width:200px;

      }

}

2.元素使用动画

div {

            width: 200px;

            height: 200px;

            background-color: pink;

             /* 2.使用动画 */

             /* 调用动画名称 */

             animation-name: move;

             /* 持续时间 */

             animation-duration: 2s;

      }

动画序列：

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

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

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

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

案例：做多个状态的变化

里面的百分比得是整数，里面的百分比就是总时间（如此例10s）的划分 

5.2 动画常用属性

改 ：pause改为paused 

steps(5)就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了 

而且千万注意，transform的综合写法中间是用空格隔开而不是逗号！！！

例如： transform: translateY(17.5px) rotateX(-70deg);  中间不是逗号隔开而是

并且注意如果有移动加其它样式，那么必须先写移动

案例：大数据热点图案例

 

 案例：奔跑的熊大案例

6.3D转换

特点 ：·近大远小 ·物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果

6.1 三维坐标系

 三维三个轴

·x轴：水平向右  注意：x 右边是正值，左边是负值

·y轴：垂直向下  注意：y 下面是正值，上面是负值

·z轴：垂直屏幕  注意：z 往外面是正值，往里面是负值

3D转换我们主要学习工作中最常用的3D位移和3D旋转

主要知识点

·3D位移：translate3d(x,y,z)

·3D旋转：rotate3d(x,y,z)

·透视：perspective

·3D呈现 transfrom-style

6.2 3D移动 translate

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

语法：

·transfrom:translateX(100px)：仅仅是在x轴上移动

·transfrom:translateY(100px)：仅仅是在y轴上移动

·transfrom:translateZ(100px)：仅仅是在z轴上移动(注意：translateZ一般用单位px，什么%不用)

·transfrom:translate3d(100px,100px,100px)：其中x,y,z分别指要移动的方向的距离，xyz是不能省略的，如果没有就写0

6.3 透视 perspective

加了透视才能看到近大远小的3d效果

注意：透视是给父亲加透视

给父级盒子加透视，那其子级盒子也能有透视效果

transfrom:translateZ(100px)；有了透视后，里面的值越大，物体就越变大，反之越变小。这个是物体在z轴上移动

perspective：500px；这个值越大物体越小。这个是眼睛在屏幕前移动，距离越近即数值越小物体就显的越大嘛。

6.5 3D旋转 rotate3d

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

语法：

·transfrom:rotateX(45deg)：沿着x轴正方向旋转45度

·transfrom:rotateY(45deg)：沿着y轴正方向旋转45度

·transfrom:rotateZ(45deg)：沿着x轴正方向旋转45度

·transfrom:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）

6.6 3D呈现 transfrom-style

·控制子元素是否开启三维立体环境

·transfrom-style:flat； 子元素并开启3D立体空间，默认的

·transfrom-style：perserve-3d；子元素开启立体空间

·代码写给父级，但是影响的是子盒子

·这个属性很重要，后面必用

案例：

1.两面翻转盒子案例

2.3D导航栏

 

 3.旋转木马案例