平面转换、空间转换

平面转换

改变盒子在平面内的形态（位移，旋转，缩放）

2D转换

属性:

1、

transform（跟transition搭配使用）

 

位移

​
transform：translate(水平移动距离，垂直移动距离)
取值：
  像素单位数值
  百分比(参照盒子自身的尺寸)
  
x轴正向为右，y轴正向为下
​
translate()  只给出一个值  表示x轴移动的距离
单独设置某个方向移动的距离   translateX()   translateY()

旋转

transform:rotate(角度)
角度单位是 deg
​
取值 
正 顺时针旋转
负 逆时针旋转

transform-origin

改变转换原点

默认原点是盒子中心点

transform-origin:原点水平位置 原点垂直位置
取值：
 方位名词:(left   top  bottom center  right)
 像素单位数值
 百分比(参照盒子自身尺寸)

多重转换

 transform: translate(600px) rotate(360deg);

原理

• 旋转会改变坐标轴方向

• 先写旋转，后面的转换效果的轴以转换后的轴为准，影响到转换结果

 

缩放

语法：

此属性不会受到父盒子宽高限制，同时也不会影响其他盒子

（背景图bacground-image使用此属性，不会受到父盒子的宽高限制）

transform:scale(倍数)
transform:scale(x轴倍数，y轴倍数)
一般情况下scale 设置一个值，表示x轴和y轴是等比例缩放
scale值大于1 表示放大， 小于1 表示缩小

渐变背景

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.5)
            );

 

2、

 

transition:过渡   谁移动就给谁加   all所有的属性  1s 1s内执行完

transition：all 2s 经常跟 ：hover 搭配使用

 

 

空间转换

X,Y,Z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换 也叫3D转换

transform

空间位移

transform: translate3d(x,y,z); 
            transform: translateX(100px);
            transform:translateY(100px);
            远离眼睛方向 负值  
            对着眼睛方向 正值
            transform: translateZ(-100px);
            
取值:
  正负都可以
  像素单位数值
  百分比

透视

z轴是视线方向，移动效果是距离的远或近，电脑屏幕是平面的，无法观察远近效果

perspective 实现透视效果

perspective  添加给父级
perspective:值
取值：像素单位数值， 数值一般在800px-1200px
作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

透视距离也叫视距，就是人的眼睛到屏幕的距离

 

空间旋转

/* transform: rotateZ(360deg); */
​
            /* transform: rotateX(60deg);
            transform: rotateX(-60deg); */
​
            transform: rotateY(60deg);
            transform: rotateY(-60deg);

立体呈现

transform-style:preserve-3d
使子元素处于真正的3d空间

左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向