CSS附加

CSS附加

1、2D转换

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

• 移动：translate

• 旋转：rotate

• 缩放：scale

1.1二维坐标系

1.2 2D转换之移动translate

1. 语法

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

2. 重点

• 定义2D转换中的移动，沿着X和Y轴移动元素

• translate最大的优点：不会影响其他元素的位置

• translate中的百分比单位是相对于自身元素的translate：（50%，50%）；

• 对行内标签没有效果

1.3 2D转换之旋转rotate

1. 语法

transform:rotate（度数）;

2. 重点

• rotate里面跟度数，单位是deg，比如rotate（45deg）

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

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

1. 4 2D转换中心点transform-origin

1. 语法

transform-origin:x y;

2. 重点

• 参数x与y用空格隔开

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

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

1. 5 2D转换之缩放scale

1. 语法

transform：scale（x,y）;

2. 重点

• 其中的x和y用逗号分隔

• transform：scale（1，1）：宽和高都放大一倍，相当于没有放大

• transform：scale（2，2）：宽和高都放大了两倍

• transform：scale（2）：只写一个参数，第二个参数和第一个参数一样，相当于scale（2，2）

• transform：scale（0.5,0.5）:缩小

• scale缩放最大的优势，可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

1. 6 2D转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform：translate(),rotate(),scale()...等

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

3. 当我们有位移和其他属性的时候，将位移放在最前

1. 7 2D转换总结

• 转换transform简单理解就是变形有2D和3D之分

• 2D移动translate（x, y）,优势是不影响其他盒子，参数用%，是相对于自身宽度和高度来计算的

• 可以分开写比如translateX（x）和translateY（y）

• 2D旋转rotate（度数）可以实现旋转元素，度数的单位是deg

• 2D缩放scale（x，y）里面参数是数字，不跟单位，可以是小数，优势是不影响其他盒子

• 设置转换中心点transform-origin：x y；参数可以是百分比、像素或者是方位名词

• 当我们进行综合写法，同时有位移和其他属性的时候，要将位移放到最前

2、动画

2. 1动画的基本使用

1. 先定义动画

2. 再使用（调用）动画

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

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

动画序列

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

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

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

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

2. 元素使用动画

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

2. 2动画常用属性

2. 3动画简写属性

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

animation：myfirst 5s linear 2s infinite alternate;

• 简写属性里不包含animation-play-state

• 暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用

• 想要动画走回来，而不是跳回来：animation-direction：alternate

• 盒子动画结束后，停在结束位置：animation-fill-mode：dorwards

2. 4速度曲线细节

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

值	描述
linear	匀速
ease	默认，低速开始，然后加快，在结束前变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束
steps()	制定了时间函数中的间隔数量（步长）

3、3D转换

3. 1三维坐标系

• x轴：水平向右

• y轴：水平向下

• z轴：垂直屏幕

3. 2 3D移动translate3d

• transform:translateX(100px):仅仅是在x轴上移动

• transform:translateY(100px):仅仅是在y轴上移动

• transform:translateZ(100px):仅仅是在z轴上移动（单位一般用px）

• transform:translate3d(x,y,z)

3. 3 透视perspective

• 想要网页产生3D效果需要透视

• 透视又称为视距

• 单位是像素

透视写在被观察元素的父盒子上

d：就是视距

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）看到的物体就越大

3. 4 translateZ

translateZ（100px）：仅仅是在Z轴上移动，有了透视，就能看到translateZ的变化

3. 5 3D旋转之rotate3d

• transform:rotateX(45deg):沿着x轴正方向旋转45度

• transform:rotateY(45deg):沿着y轴正方向旋转45度

• transform:rotateZ(45deg):沿着z轴正方向旋转45度

• transform:rotate3d(x,y,a,45deg):沿着自定义轴旋转45度（了解即可）

左手准则：

• 左手的手拇指指向x轴的正方向

• 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3. 6 3D呈现transform-style

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

• transform-style：flat子元素不开启3d立体空间，默认

• transform-style：preserve-3d；子元素开启立体空间

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

4、浏览器私有前缀

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

4. 1 私有前缀

• -moz-：代表firefox浏览器私有属性

• -ms-：代表ie浏览器私有属性

• -webkit-：代表safari、chrome私有属性

• -o-：代表Opera私有属性

4. 2 提倡写法

-moz-border-radius：10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

结束语:了无音讯的日子里都在热爱生活。