3D转化【复合属性】

3D转化【复合属性】

左手法则表示3D坐标系：

1. 大拇指指向的方向就是 X 轴的正方向

2. 中指指向的方向就是 Y 轴的正方向

3. 食指指向的方向就是  Z 轴的正方向

沿着X轴位移（水平位移）

语法：

transform: translateX(值);

例如：

    div {

width: 200px;

        height: 200px;

        background-color: red;

        transform: translateX(200px);

    }

总结：

1. translateX代表元素沿着水平方向位移

2. 正数代表水平向右移动

3. 负数代表水平向左移动

4. 可以设置百分比，相对当前元素自身的宽度

沿着Y轴位移

语法：

  transform: translateY(值);

例如：

div {

width: 200px;

        height: 200px;

        background-color: red;

        transform: translateY(200px);

    }

总结：

1.translateY 代表元素沿着垂直方向位移

2.正数代表垂直向下移动

3.负数代表垂直向上移动

4.可以设置百分比，相对元素自身的高度

沿着Z轴位移

语法：

  transform: translateZ(值);

例如：

    body {

        /*透视*/

perspective: 1000px;

    }

div {

width: 200px;

        height: 200px;

        background-color: red;

        transform: translateZ(200px);

    }

总结：

1. transform: translateZ 代表沿着Z轴移动

2. 正数朝向我们移动

3. 负数背向我们移动

4. 不能设置百分比

透视perspective介绍

作用： 网页中实现近大远小效果的属性

设置方式： 给设置了transform属性元素的父元素设置

取值范围： 推荐 600 - 1000 之间

---

3D转化旋转

沿着X轴旋转

语法：

  transform: rotateX(值)

备注：

1. rotateX中的值的单位表示角度，使用deg表示

例如：

    div {

width: 200px;

        height: 200px;

        border: 1px solid red;

        transform: rotateX(30deg);

    }

总结：

1. rotateX 代表元素绕着X轴旋转

2. 可以设置正数或负数

3. 通过transform-origin修改旋转轴的位置

沿着Y轴旋转

语法：

  transform: rotateY(值)

备注：

1. rotateY中的值的单位表示角度，使用deg表示

例如：

    div {

width: 200px;

        height: 200px;

        border: 1px solid red;

        transform: rotateY(30deg);

    }

总结：

1. rotateY 代表元素绕着Y轴旋转

2. 可以设置正数或负数

沿着Z轴旋转

语法：

  transform: rotateZ(值)

备注：

1. rotateZ中的值的单位表示角度，使用deg表示

例如：

    div {

width: 200px;

        height: 200px;

        border: 1px solid red;

        transform: rotateZ(30deg);

    }

总结：

1. rotateZ 代表元素绕着Z轴旋转

2. 可以设置正数或负数

3. 通过transform-origin修改旋转轴的位置

3D旋转轴的改变

2D旋转，主要元素是绕着点在旋转，所以在2d转化中通过transform-origin改变的是旋转圆点的位置

3D旋转，主要元素是绕着轴在旋转，所以3d转化中也是通过transform-origin改变的是旋转轴的位置

---

3D转化缩放

沿着X轴缩放

语法：

  transform: scaleX(值);

备注：

  1. scaleX中的值代表的是倍数，倍数是相对当前元素的宽度，不需要设置单位

  2. 不能设置负数

例如：

    div {

width: 200px;

        height: 200px;

        /*元素最后的宽度是400，是在原来200宽度的基础上扩大了2倍*/

        transform: scaleX(2);

    }

总结：

1. scaleX 代表的是元素宽度扩大或缩小对应的倍数

2. 大于1，代表放大倍数

3. 大于0小于1,代表缩小倍数

4. 等于1，大小不变

5. 等于0，宽度为0

沿着Y轴缩放

语法：

  transform: scaleY(值);

备注：

  1. scaleY中的值代表的是倍数，不需要设置单位

  2. 不能设置负数

例如：

    div {

width: 200px;

        height: 200px;

        /*元素最后的高度是400，是在原来200高度的基础上扩大了2倍*/

        transform: scaleY(2);

    }

总结：

1. scaleY 代表的是元素高度扩大或缩小对应的倍数

2. 大于1，代表放大倍数

3. 大于0小于1,代表缩小倍数

4. 等于1，大小不变

5. 等于0，宽度为0

将平面图形转化为立体图形

transform-style: preserve-3d;

设置了该属性后，不需要再给元素设置透视的属性了。