【无标题】＜纯HTML＞实现立方体旋转

最新推荐文章于 2022-10-08 09:50:11 发布

Marsyu692

最新推荐文章于 2022-10-08 09:50:11 发布

阅读量165

点赞数

文章标签： html5 前端

本文链接：https://blog.csdn.net/qq_63197208/article/details/125842484

版权

利用transform属性做出一个可以360度旋转的立方体

以下为html代码，想要其中的holder.js文件可以私信问我要。

<!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>正方体旋转体</title>
    <script src="../JS/holder.js"></script> // hodler.js文件是外部引入的js文件，用于随机生成纯色的图片
    <style>
        body{
            perspective: 2000px;
        }
        .touzi div{
            position: absolute;
            font-size: 3em;
            text-align: center;
            width: 130px;
            height: 130px;
            background: url("?holder.js/130x130?random=yes");
        }
        .touzi{
            position: relative;
            margin-left: 43%;
            margin-top: 200px;
            width: 130px;
            height: 130px;
            transform-style: preserve-3d;
            animation: run 5s linear infinite;
            transform: rotate3d(1 2 -1 45deg);
        }
        .touzi:hover{
            animation-play-state: paused;
        }
        .touzi div:nth-child(1){
            transform: rotateY(0deg) translateZ(65px);
        }
        .touzi div:nth-child(2){
            transform: rotateY(90deg) translateZ(65px);
        }
        .touzi div:nth-child(3){
            transform: rotateY(180deg) translateZ(65px);
        }
        .touzi div:nth-child(4){
            transform: rotateY(270deg) translateZ(65px);
        }
        .touzi div:nth-child(5){
            transform: rotateX(90deg) translateZ(65px);
        }
        .touzi div:nth-child(6){
            transform: rotateX(270deg) translateZ(65px);
        }
        @keyframes run {
            from{
                transform: rotateY(0);
            }
            to{
                transform: rotateY(360deg) rotateX(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="touzi">
        <div class="holderjs">1</div>
        <div class="holderjs">2</div>
        <div class="holderjs">3</div>
        <div class="holderjs">4</div>
        <div class="holderjs">5</div>
        <div class="holderjs">6</div>
    </div>
</body>
</html>