每日一结笔记

一、css3的transform属性

x轴：水平，向右为正，向左为负

y轴：垂直，向下为正，向上为负

2d转换的方法

1、2D变形：位移、旋转、缩放、倾斜

(1) transform: translate()位移

transform: translate(x,y) 沿着x轴和y轴移动

transform: translateX(x) 沿着x轴移动

transform: translateY(y) 沿着y轴移动

取值:

    px

     百分比（强调相对于元素本身计算）

     水平，向右为正，向左为负

     垂直，向下为正，向上为负

     x与y之间用逗号隔开

      /* 沿水平方向位移 */ 当为一个值的时候，只沿着水平方向位移 transform: translate(50px);   注意:元素位移之后，原来的位置还在

(2) transform: rotate(ndeg) 旋转

语法

transform：rotate(deg);沿着中心点旋转，默认值

transform: rotateX(deg);沿着X轴旋转

transform: rotateY(deg);沿着Y轴旋转

单位：deg ​ 当角度值为正数时，元素沿着顺时针方向旋转 ​

                   当角度值为负数时，元素沿着逆时针方向旋转

(3）transform: scale() 缩放

transform: scale(x,y) 沿着x轴和y轴缩放

transform: scaleX(x) 沿着x轴缩放

transform: scaleY(y) 沿着y轴缩放

取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1

取值为负值表示先翻转后缩放为一个值的时候，沿着水平方向和垂直方向等比例缩放

元素缩放为0 后，原来的位置还在x与y之间用逗号隔开

transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍，等比例缩放 */
transform: scale(-1.5);/* 先翻转，然后 沿着水平方向和垂直方向都放大1.5倍 */

(4)transform: skew() 倾斜

     transform: skew(x,y) 沿着x轴和y轴倾斜

     transform: skewX(x) 沿着x轴倾斜

     transform: skewY(y) 沿着y轴倾斜单位deg(角度)

    正值,向左上角和右下角倾斜；

    负值，向右上角和左下角倾斜

    为一个值的时候，只沿着水平方向倾斜

(5)旋转，位移，缩放，倾斜的复合写法

   属性之间用空格隔开
​
    .wrap:hover .box1 {
            transform: rotate(135deg);
            transform: translate(50px);
            transform: scale(1.5);
           
            transform: translate(100px) rotate(120deg) scale(1.5);
        }

二、3D变形：平移、旋转、缩放

什么是3d转换

1.3D立体空间的3根轴线

      x轴：水平，向右为正，向左为负

      y轴：垂直，向下为正，向上为负

      z轴：垂直于屏幕，向外为正，向内为负

2. transform-style: preserve-3d; 创建3d空间

一般取值：800px-1000px   透视点到元素的距离      近大远小

perspective属性 ：给父元素或者body加

perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素