CSS3D--立方体

最新推荐文章于 2023-04-03 10:17:21 发布

一个大土豆的日常

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量370

点赞数 1

分类专栏： HTML5+CSS3 文章标签： css3 3d

本文链接：https://blog.csdn.net/wbdsr234/article/details/68941936

版权

HTML5+CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

3D立方体自动旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style>
        *{margin: 0;padding: 0;}
        body{background: #333;}
        .stage{
            width:200px;
            height:200px;
            margin:200px auto;
            perspective: 0;
        }
        .wrap{
            width:400px;
            height:400px;
            position: relative;
            transform-style: preserve-3d;
            animation: cube 10s infinite linear;
        }
        @keyframes cube {
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        .wrap div{
            width:400px;
            height:400px;
            position: absolute;
            opacity: 0.8;
        }
        .wrap span{
            display: block;
            width:200px;
            height:200px;
            position: absolute;
            left:100px;
            top:100px;
            opacity: 0.6;
        }
        .wrap i{
            display: block;
            width:100px;
            height:100px;
            position: absolute;
            left:150px;
            top:150px;
        }
        .div1{
            background: url("images/1.jpg") center/cover no-repeat;
            transform:translateZ(200px);
        }
        .div2{
            background: url("images/2.jpg") center/cover no-repeat;
            transform:translateZ(-200px);
        }
        .div3{
            background: url("images/3.jpg") center/cover no-repeat;
            transform: rotateX(90deg) translateZ(200px);
        }
        .div4{
            background: url("images/4.jpg") center/cover no-repeat;
            transform: rotateX(90deg) translateZ(-200px);
        }
        .div5{
            background: url("images/5.jpg") center/cover no-repeat;
            transform: rotateY(90deg) translateZ(200px);
        }
        .div6{
            background: url("images/6.jpg") center/cover no-repeat;
            transform: rotateY(90deg) translateZ(-200px);
        }
        .s1{
            background: url("images/pic1.jpg") center/cover no-repeat;
            transform:translateZ(100px);
        }
        .s2{
            background: url("images/pic2.jpg") center/cover no-repeat;
            transform:translateZ(-100px);
        }
        .s3{
            background: url("images/pic3.jpg") center/cover no-repeat;
            transform: rotateX(90deg) translateZ(100px);
        }
        .s4{
            background: url("images/pic4.jpg") center/cover no-repeat;
            transform: rotateX(90deg) translateZ(-100px);
        }
        .s5{
            background: url("images/pic5.jpg") center/cover no-repeat;
            transform: rotateY(90deg) translateZ(100px);
        }
        .s6{
            background: url("images/pic6.jpg") center/cover no-repeat;
            transform: rotateY(90deg) translateZ(-100px);
        }
        .i1{
            background:rgba(0,255,255,0.5);
            transform:translateZ(50px);
        }
        .i2{
            background: rgba(153,204,255,.5);
            transform:translateZ(-50px);
        }
        .i3{
            background: rgba(255,153,204,.5);
            transform: rotateX(90deg) translateZ(50px);
        }
        .i4{
            background: rgba(255,0,255,.5);
            transform: rotateX(90deg) translateZ(-50px);
        }
        .i5{
            background: rgba(128,0,128,.5);
            transform: rotateY(90deg) translateZ(50px);
        }
        .i6{
            background: rgba(0,204,255,.5);
            transform: rotateY(90deg) translateZ(-50px);
        }
        .wrap:hover .div1{
            transform:translateZ(300px);
        }
        .wrap:hover .div2{
            transform:translateZ(-300px);
        }
        .wrap:hover .div3{
            transform: rotateX(90deg) translateZ(300px);
        }
        .wrap:hover .div4{
            transform: rotateX(90deg) translateZ(-300px);
        }
        .wrap:hover .div5{
            transform: rotateY(90deg) translateZ(300px);
        }
        .wrap:hover .div6{
            transform: rotateY(90deg) translateZ(-300px);
        }
        .wrap:hover .s1{
            transform:translateZ(200px);
        }
        .wrap:hover .s2{
            transform:translateZ(-200px);
        }
        .wrap:hover .s3{
            transform: rotateX(90deg) translateZ(200px);
        }
        .wrap:hover .s4{
            transform: rotateX(90deg) translateZ(-200px);
        }
        .wrap:hover .s5{
            transform: rotateY(90deg) translateZ(200px);
        }
        .wrap:hover .s6{
            transform: rotateY(90deg) translateZ(-200px);
        }
    </style>
</head>
<body>
<div class="stage">
    <div class="wrap">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
        <span class="s5"></span>
        <span class="s6"></span>
        <i class="i1"></i>
        <i class="i2"></i>
        <i class="i3"></i>
        <i class="i4"></i>
        <i class="i5"></i>
        <i class="i6"></i>
    </div>
</div>
</body>
</html>