rotate3d | 简单实现一个旋转正方体

一、空间转换

  rotate3d是一种3D空间转换函数，用于在三维空间中围绕指定轴旋转元素，而不会使其变形。它提供了比 2D 旋转更灵活和复杂的视觉效果，常用于创建 3D 动画、翻转效果或立体交互设计。

二、涉及函数属性

1. transition：动画效果过渡，包含的属性有 transform、opacity、color 等。

// 1. 设置为 all，即为所有可动画属性设置5秒的过渡效果
transition: all 5s;
// 2. 当 transform 的值发生变化时（如旋转、平移、缩放等）
// 会以 5 秒的动画时间从旧值过渡到新值。
transition: transform 5s;

2. ransform-style：子元素在 3D 空间中保留其 3D 变换效果。

// 3.如果不设置此属性，子元素的 3D 变换可能会被“扁平化”到父元素的 2D 平面中。
transform-style: preserve-3d;

3. transform 用于对元素进行 2D 或 3D 变换的属性，可以旋转、缩放、平移、倾斜等。X数值为正向右，Y数值为正向下。

3.1 平移（Transform）

// 1. 平移（Translate）
translate(x, y)：沿 X 和 Y 轴移动元素，单位是px。
translateX(x)：仅沿 X 轴移动。
translateY(y)：仅沿 Y 轴移动。

3.2  缩放（Scale）

 // 2. 缩放（Scale）
scale(x, y)：沿 X 和 Y 轴缩放元素，单位是px。
scaleX(x)：仅沿 X 轴缩放。
scaleY(y)：仅沿 Y 轴缩放。

3.3 旋转（Rotate）

// 3. 旋转（Rotate）
rotate(angle)：绕元素的中心点旋转，单位是deg。

三、实现代码

tips：正方体图片来源 element-plus ，官网：Image 图片 | Element Plus

<template>
    <h1>立体正方体 旋转</h1>
    <div class="big-cube">
        <div class="up">
            <el-image src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"></el-image>
        </div>
        <div class="one">
            <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
        </div>
        <div class="two">
            <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>
        </div>
        <div class="three">
            <el-image src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"></el-image>
        </div>
        <div class="four">
            <el-image src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"></el-image>
        </div>
        <div class="down">
            <el-image src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"></el-image>
        </div>
    </div>
</template>
<script lang="ts" setup>

</script>

<style scoped>
.big-cube {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 150px auto;
    transform-style: preserve-3d;
    transition: transform 5s;
    /**加这个的话，上下旋转可以看到全部面，注释之后就是只有左右或者上下 */
    transform: rotateX(30deg) rotateY(30deg);

    div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        /* 确保背面可见 */
    }

    .up {
        background-color: lawngreen;
        transform: translateX(0px) translateY(-100px) rotateX(90deg);
    }

    .one {
        background-color: orange;
        transform: translateZ(100px);
    }

    .two {
        background-color: yellow;
        transform: translateZ(-100px);
    }


    .three {
        background-color: red;
        transform: rotateY(90deg) translateZ(100px) translateY(0px);
    }

    .four {
        background-color: purple;
        transform: rotateY(-90deg) translateZ(100px) translateY(0px);
    }

    .down {
        background-color: lightcyan;
        transform: translateX(0px) translateY(100px) rotateX(90deg);
    }


}

.big-cube:hover {
    /* 上下旋转 */
    transform: rotateX(360deg);
    /* 左右旋转 */
    /* transform: rotateY(360deg); */
}
</style>

四、实现效果

五、其他效果

① .big-cube 的 transform: rotateX(30deg) rotateY(30deg); 注释之后，就可以实现四个面的上下旋转。

② 注释之后，将 .big-cube:hover 的 transform: rotateX(360deg);修改为transform: rotateX(360deg);，就可以实现四个面的左右旋转。