主页 分类 关于

CSS 正方体旋转效果

  1. 绘制正方体

CSS个人整理

绘制正方体

以面为单位

<style>
    html {
        background:linear-gradient(#9ed128 0%,#358b98 80%);
        height:1000px;
        opacity:0.8;
    }
    .wrapper {
        margin-top:200px;
        perspective:1000px;
    }
    .cube {
        height:200px;
        width:200px;
        position:relative;
        margin:auto;
        transform-style:preserve-3d;
        -webkit-animation:rotate 15s infinite;
        -o-animation:rotate 15s infinite;
        animation:rotate 15s infinite 2s;
    }
    @keyframes rotate {
        from {
        transform:rotateY(0deg) rotateX(0deg);
    }
    to {
        transform:rotateY(360deg) rotateX(360deg);
    }
    }.cube>div {
        height:100%;
        width:100%;
        opacity:0.9;
        position:absolute;
        text-align:center;
        background:#333;
        color:#fff;
        line-height:200px;
        font-size:30px;
    }
    .plane-front {
        transition: 0.5s;
        transform:translateZ(100px);
    }
    .plane-back {
        transition: 0.5s;
        transform:rotateY(180deg) translateZ(100px);
    }
    .plane-left {
        transition: 0.5s;
        transform:rotateY(270deg) translateZ(100px);
    }
    .plane-right {
        transition: 0.5s;
        transform:rotateY(90deg) translateZ(100px);
    }
    .plane-top {
        transition: 0.5s;
        transform:rotateX(90deg) translateZ(100px);
    }
    .plane-bottom {
        transition: 0.5s;
        transform:rotateX(270deg) translateZ(100px);
    }
    .cube:hover .plane-front {
        transform:translateZ(200px);
    }
    .cube:hover .plane-back {
        transform:rotateY(180deg) translateZ(200px);
    }
    .cube:hover .plane-left {
        transform:rotateY(270deg) translateZ(200px);
    }
    .cube:hover .plane-right {
        transform:rotateY(90deg) translateZ(200px);
    }
    .cube:hover .plane-top {
        transform:rotateX(90deg) translateZ(200px);
    }
    .cube:hover .plane-bottom {
        transform:rotateX(270deg) translateZ(200px);
    }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="cube">
            <div class="plane-front">前面</div>
            <div class="plane-back">后面</div>
            <div class="plane-right">右面</div>
            <div class="plane-left">左面</div>
            <div class="plane-top">上面</div>
            <div class="plane-bottom">下面</div>
        </div>
    </div>
</body>
</html>

效果展示

点击进入










作者: 我叫史迪奇
本文来自于: https://sdq3.link/CSS-cube.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议