CSS 3D炫酷的旋转魔方

最新推荐文章于 2022-08-16 14:12:01 发布

MoveLikeRabbit

最新推荐文章于 2022-08-16 14:12:01 发布

阅读量1.9k

点赞数 3

分类专栏： css 文章标签： 3d css

本文链接：https://blog.csdn.net/MoveLikeRabbit/article/details/78070227

版权

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS3实现3D魔方效果，包括设置perspective、transform-style、transform-origin等属性来创建立体视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在复习HTML 和 CSS，把以前做的一些小例子拿出来分享一下，也加深自己的印象

css 是通过 transform 来实现3D旋转的，看代码之前，先复习一下相关知识

transform-origin 规定了转换的中心点，定义场景，也就是灭点，2D 转换可以设置 x轴和y轴，3D转换还能设置 z轴语法：transform-origin: x-axis y-axis z-axis;
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。flat 子元素将不保留其 3D 位置。preserve-3d 子元素将保留其 3D 位置。
perspective 定义 3D 元素距视图的距离
perspective-origin 定义透视方位，相当于从上下左右那个方向透视，语法 perspective-origin: x-axis y-axis;

3D旋转魔方用到了
perspective 给魔方一个透视的距离
transform-style 保留每一个魔方每个面的3D位置
transform-origin 每个魔方面旋转的的基点位置，和整个魔方旋转的基点位置
transform: translate3d(x,y,z) 3D转换

这里写图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>CSS 3D魔方</title>
        <meta charset="utf-8">
    </head>
    <style>
    .bigbox{
        perspective: 500px;
        /* 定义场景，灭点为500 */       
    }
    .box{

        margin: 0 auto;
        margin-top: 200px;
        width: 200px;
        height: 200px;
        background: red;
        position: relative;
        transition: all 5s  ease;
        transform-style: preserve-3d; 
        transform-origin: center center 100px;

    }
    .box:hover{
        transform: rotateX(360deg)rotateY(360deg)rotateZ(360deg);
    }
    .box div{
        width: 200px;
        height: 200px;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
    }
    /* top */
    .box div:nth-child(1){
        top: -200px;
        background: rgba(255, 0, 0, 0.5);
        transform-origin: bottom;
        transform: rotateX(-90deg)
    }
    /* bottom */
    .box div:nth-child(2){
        top: 200px;
        background: rgba(0, 255, 0, 0.5);
        transform-origin: top;
        transform: rotateX(90deg)
    }
    /* right */
    .box div:nth-child(3){
        right: -200px;
        background: rgba(0, 0, 255, 0.5);
        transform-origin: left;
        transform: rotateY(-90deg)
    }
    /* left */
    .box div:nth-child(4){
        left: -200px;
        background: rgba(255, 255, 0, 0.5);
        transform-origin: right;
        transform: rotateY(90deg)
    }
    /* font */
    .box div:nth-child(5){
        background: rgba(255, 0, 255, 0.5);
        transform: translate3d(0, 0, 200px);
    }
    /* behind */
    .box div:nth-child(6){
        background: rgba(0, 255, 555, 0.5);
        transform: translate3d(0, 0, 0);
    }
    h3{
        text-align: center;
    }
    </style>

    <body>
        <h3>将鼠标移入盒子看3D效果</h3>
        <div class="bigbox">
            <div class="box">
                <div>01</div>
                <div>02</div>
                <div>03</div>
                <div>04</div>
                <div>05</div>
                <div>06</div>
            </div>
        </div>
    </body>
</html>