用html和css做一个旋转的正方体

最新推荐文章于 2024-07-06 13:17:42 发布

~，555555

最新推荐文章于 2024-07-06 13:17:42 发布

阅读量2.6k

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44717047/article/details/115730649

版权

html css3 html5

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

用html和css做一个旋转的正方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 200px;
            height: 200px;
            /* 设置景深 */
            perspective: 10000px;
            margin: 50px auto;
        }
        section:hover #box{
            transform:rotateX(360deg) rotateY(360deg) ;
        }
        #box{
            width: 200px;
            height: 200px;
            perspective: 10000px;
            /* 既是p标签的舞台，自己也是section标签的演员 要设置transform-style*/
            transform-style: preserve-3d;
            position: relative;
            transition: transform 10s linear 0s;

        }
        #box p{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        #front{
            /* 让盒子向前移动100px，更靠近观察者100px */
            transform: translateZ(100px);
            background-color:chocolate;
        }
        #top{
            /* 让盒子绕着X轴３D旋转90度，此时盒子垂直于电脑屏幕，然后再让它沿着此时的Z轴正方向（向上）移动100px*/
            transform: rotateX(90deg) translateZ(100px);
            background-color:rgb(22, 243, 232);
        }
        #back{
            /* 让盒子向后移动100px，远离观察者100px  */
            transform: translateZ(-100px);
            background-color:rgb(13, 105, 241);
        }
        #bottom{
            /* 让盒子绕着X轴３D旋转-90度，此时盒子垂直于电脑屏幕，然后再让它沿着此时的Z轴正方向（向下）移动100px  */
            transform: rotateX(-90deg) translateZ(100px);
            background-color:rgb(124, 238, 17);
        }
        #left{
            /* 让盒子绕着Y轴３D旋转-90度，此时盒子垂直于电脑屏幕，然后再让它沿着此时的Z轴正方向（向左）移动100px*/
            transform: rotateY(-90deg) translateZ(100px);
            background-color:rgb(233, 10, 177);
        }
        #right{
            /* 让盒子绕着Y轴３D旋转90度，此时盒子垂直于电脑屏幕，然后再让它沿着此时的Z轴正方向（向右）移动100px*/
            transform: rotateY(90deg) translateZ(100px);
            background-color:rgb(238, 17, 17);
        }
    </style>
</head>
<body>
    <section>
        <div id="box">
            <p id="front">正面</p>
            <p id="top">顶面</p>
            <p id="back">背面</p>
            <p id="bottom">底面</p>
            <p id="left">左面</p>
            <p id="right">右面</p>
        </div>
    </section>
</body>
</html>

效果如图：
在这里插入图片描述
当然如果把颜色设置为rgba加点透明，去掉文字会更好看一点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 200px;
            height: 200px;
            /* 设置景深 */
            perspective: 10000px;
            margin: 50px auto;
        }

        @keyframes r {
            from{
                transform:rotateX(0deg) rotateY(0deg)
            }
            to{
                transform:rotateX(360deg) rotateY(360deg)
            }
        }
        #box{
            width: 200px;
            height: 200px;
            perspective: 10000px;
            /* 既是p标签的舞台，自己也是section标签的演员 要设置transform-style*/
            transform-style: preserve-3d;
            position: relative;
            animation: r 10s linear 0s infinite alternate;

        }
        #box p{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        #front{
            transform: translateZ(100px);
            background-color:rgba(210, 105, 30, 0.438);
        }
        #top{
            transform: rotateX(90deg) translateZ(100px);
            background-color:rgba(22, 243, 232, 0.226);
        }
        #back{
            transform: translateZ(-100px);
            background-color:rgba(13, 104, 241, 0.397);
        }
        #bottom{
            transform: rotateX(-90deg) translateZ(100px);
            background-color:rgba(124, 238, 17, 0.315);
        }
        #left{
            transform: rotateY(-90deg) translateZ(100px);
            background-color:rgba(233, 10, 177, 0.432);
        }
        #right{
            transform: rotateY(90deg) translateZ(100px);
            background-color:rgba(238, 17, 17, 0.438);
        }
    </style>
</head>
<body>
    <section>
        <div id="box">
            <p id="front"></p>
            <p id="top"></p>
            <p id="back"></p>
            <p id="bottom"></p>
            <p id="left"></p>
            <p id="right"></p>
        </div>
    </section>
</body>
</html>