transform 2D 与 3D 转换

shuye1015
177 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天

transform 2D 与 3D 转换

  • 在 CSS 中，利用transform这个属性实现对元素进行旋转，缩放，倾斜或平移。

1、transform 的 2D 变换函数

属性值描述实例
translate(x,y)x，y 为长度单位,可以是 px，也可以是百分比%，
x 表示元素在 x 轴上的移动量
y 表示元素在 y 轴上的移动量，
如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)		transform:translate(100px,200px)
translateX(x)x 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 x 轴上的位移量		transform:translateX(300px)
translateY(y)y 为长度单位，可以是 px，也可以是百分比%
表示元素在平面 Y 轴上的位移量		transform:translateY(200px)
rotate(ax)ax 代表旋转的角度
正角表示顺时针旋转
负角表示逆时针旋转		transform:rotate(30deg)
scaleX(x)x 数字类型，表示元素在 x 轴上的缩放比transform:scaleX(2)
scaleY(y)y 数字类型，表示元素在 y 轴上的缩放比transform:scaleY(2)
scale(x,y)x 数字类型，表示元素在 x 轴上的缩放比
y 数字类型，表示元素在 y 轴上的缩放比
当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放		transform:scale(2,3)

2、transform 的 3D 转换属性值

属性值描述实例
translateZ(z)x 为 px 长度单位
元素在 3D 空间 z 轴方向上的位移量		transform:translateZ(200px)
translate3d(x,y,z)x，y，z 分别为 px 长度单位
x 表示元素在 x 轴坐标上的位移量
y 表示元素在 y 轴坐标上的位移量
z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性		transform:translate3d(50px,30px ,50px)
rotateX(ax)表示元素绕X轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotateX(30deg);
rotateY(ay)表示元素绕Y轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotateY(30deg);
rotateZ(az)表示元素绕Z轴旋转一定的角度
ax 表示度数，可以为正，也可以为负		transform:rotate(30deg);

3、translate 位移

  • css 中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移。 |属性值|描述|举例| |--|--|--| |translate(x,y)|实现元素水平和垂直位移量|translate(30px,50px)| |translateX(x)| 实现元素水平位移量 |translateX(30px)| |translateY(y)|实现元素垂直位移量 |translateY(50px)|

4、transform-origin

  • 关键词（left、right）与（top、bottom) 与 center 三组中任意一个与另一组中的一个关键字组合来表示 |关键 |字 |描述| |--|--|--| |left |原点为元素左边中间位置，同left center一样| |right| 原点为元素右边中间位置，同right center一样| |top |原点为元素上边中间位置，同top center一样| |bottom |原点为元素下边中间位置，同bottom center一样| |center |原点为元素中间位置，同center center一样| |top left |原点为元素左上角，相当于坐标（0 0）| |top right |原点为元素右上角| |left bottom |原点为元素左下角| |right bottom |原点为元素右下角|
  • 元素的默认变换原点为元素的中间位置transform-origin:center;

5、旋转的三角形 --- 2D 转换实战应用

<style>
  .jiantou::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    /* 先旋转到-135deg的位置 */
    transform: rotate(-135deg);
    /* 过渡动画 */
    transition: transform 1s;
  }
  .jiantou:hover::after {
    /* 顺时针旋转到45deg */
    transform: rotate(45deg);
  }
</style>
<body>
  <span class="jiantou"></span>
</body>

6、鼠标滑动图片放大 --- 2D 转换实战应用

<style>
  .item {
    width: 300px;
    height: 300px;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
  .item::after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .item .play {
    width: 60px;
    height: 60px;
    background: url(./images/play.png) no-repeat;
    background-size: contain;
    /* 以下4行代码，控制元素水平垂直居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 透明度为0 */
    opacity: 0;
    transition: all 0.5s;
    z-index: 4;
  }
  .item img {
    transition: transform 1s;
  }
  .item:hover img {
    transform: scale(1.2);
  }
  .item:hover::after {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .item:hover .play {
    opacity: 1;
    /* 这里要特别注意加上 translate(-50% , -50%) */
    transform: translate(-50%, -50%) scale(1.5);
  }
</style>
<body>
  <div class="item">
    <img src="./images/music.jpg" alt="" />
    <span class="play"></span>
  </div>
</body>

7、3D 转换

perspective 属性

  • 在 css3 中，用perspective属性来设置透视距，即模拟人站在离屏幕多远的地方来看电脑上显示的元素。
  • 比如 perspective:800px;意思就是在离屏幕 800px 的地方看到这个元素。
  • 如果元素往Z 轴正方向移动，离我们越近，看到物体就越大，
  • 如果元素往Z 轴负方向移动，离我们越远，看到的物体就越小
  • perspective 这个属性要设置在 父元素上面。

总体的注意事项

注意：

transform 后面多个变换函数，用空格隔开，多个变换函数顺序不一样，结果会不一样。 比如：先旋转会改变坐标轴的方向

案例 -- 3D 导航

    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
        </ul>
    </div>

    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }

        .navs li {
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;

            transform-style: preserve-3d;
            /* 选择：写代码的过程中看到立体盒子 */
            /* transform: rotateX(-25deg) rotateY(30deg); */

            position: relative;
        }

        .navs li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: white;

            position: absolute;
            left: 0;
            top: 0;
        }

        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }

        .navs li a:last-child {
            background-color: orange;
            /* 躺平X轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
avatar
文章
阅读
粉丝