css平移+3d转换+动画小结

位移:translate 可以让盒子沿着x轴或者y轴来移动。

语法:

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

旋转:rotate 旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg); turn   一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置旋转的中心点位置: transform-origin: right bottom;

缩放:scale 缩小放大元素大小

语法:

transform: scale(1.5)；

倾斜 : skew 让元素产生一定角度的倾斜

transform: skew(-50deg)；

倾斜里面也是deg  往左倾斜是负值 往右是正值 尽量不要超过90deg,不然就看不到

渐变

线性渐变:

渐变色的第一个属性是方向  to属性 方位名词(top上,bottom下,left左,right右)

多个颜色使用逗号隔开 默认是从上到下进行渐变

 background-image: linear-gradient(to top, yellow, red, green, pink);

径向渐变:

background-image: radial-gradient(半径大小 at水平方向  垂直方向,颜色1,颜色2...);

注意点:根据盒子的形状,展示不同的效果  正方形->圆形   长方形->椭圆形

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反：

• X 轴 往右越大，是正值， 否则反之

• Y 轴 往下越大，是正值，否则反之

• Z轴 （指向我们）越大，是正值，否则反之3D位移

3D位移

有完整写法：  transform: translate3d(x, y, z);

分开写法:

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果 

语法:perspective: 800px;

注意事项：

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给父亲添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

   • 其中 d 为透视的距离

   • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

立体呈现

子盒子在父盒子内有空间的展示，此时可以给父亲添加,3d里面的盒子每一个盒子都有自己坐标轴

transform-style: preserve-3d;

动画

动画使用分为定义和调用：

 1. 定义的动画 

@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或

@keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2.调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}