转换transform及transition过渡学习笔记

转换transform-2D转换

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

可以理解为变形

• 移动：translate

• 旋转：rotate

• 缩放：scale

1.移动 translate

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

1.1 语法

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

1.2 重点

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

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

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

• 对行内标签没有效果

居中

position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)

2.旋转 rotate

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

2.1 语法

transform:rotate(度数)

2.2 重点

• rotate里面跟度数，单位是：deg，eg:rotate(45deg)

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

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

div{
    //过渡属性
    transition: all 0.3s;
}
​
div.hover{
    transform: rotate(360deg);
}
​
div:hover::after

3 2D转换中心点 transform-origin

3.1 语法

transform-origin: x y;

3.2 重点

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

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

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

4.缩放 scale

4.1 语法

transform: scale(x,y)

4.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缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5.2D转换综合写法

注意：

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

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

3. 同时有位移和其他属性时，位移放在最前面

转换transform-3D转换

3D位移：translate3d(x,y)和3D旋转：rotate3d(x,y,z)；透视: perspective；3D呈现 transform-style

1.3D位移 translate3d

transform: translate3d(x,y,z);
transform: translateZ(100px); //沿Z轴移动，单位一般用px，向外移动100px
transform: translateX(100px) translateY(100px) translateZ(100px);  
transform: translate3d(0,100px,100px); 

2.透视 perspective-3D立体效果图，单位px

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

d：视距，人的眼睛到屏幕的距离

z：z轴，物体距离屏幕的距离，z轴越大，看到的物体越大

body{
    perspective:200px;//透视越小，盒子越大
}

3.translateZ

translateZ越大，物体越大；值越小，物体越小

4.3D旋转 rotate3d

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

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);
transform: rotate3d(1,0,0,45deg);

中心点在盒子中间，rotateX、rotateY左手法则，大拇指轴的正方向，四指为旋转方向

rotateZ，类似rotate

5. 3D呈现 transfrom-style：flat | preserve-3d

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

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

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

• 代码写给父级，但是影响的是子盒子（保留立体空间）

过渡transition

元素从一种样式变换为另外一个样式时为元素添加效果

过渡动画：是从一个状态 渐渐的过渡到另外一个状态

经常和:hover搭配使用

语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始；

1.属性

想要变化的css属性，宽度高度 背景颜色 内外边距 都可以，如果想要所有的属性都变化过渡，写一个all就可以

2.花费时间：单位是秒，eg 0.4s

3.运动曲线：默认是ease（可以省略）

linear匀速 ease逐渐慢下 ease-in加速 ease-out减速 ease-in-out先加速再减速 cubic-bezier函数：自定义速度模式

4.何时开始：单位是秒（必须写单位），可以设置延迟触发时间 默认是0s（可以省略）

谁做过渡给谁加

transition: all 0.4s;
transition: width 0.5s;
transition: width 0.5s , height 0.5s;