纯CSS转换实现旋转的正立方体

最新推荐文章于 2020-03-04 12:40:55 发布

Mr.王征

最新推荐文章于 2020-03-04 12:40:55 发布

阅读量209

点赞数 3

分类专栏： CSS 文章标签： css css3 动画

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87895485

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

代码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯CSS画出旋转的正立方体</title>
    <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 {
            transform:translateZ(100px);
        }
        .plane-back {
            transform:rotateY(180deg) translateZ(100px);
        }
        .plane-left {
            transform:rotateY(270deg) translateZ(100px);
        }
        .plane-right {
            transform:rotateY(90deg) translateZ(100px);
        }
        .plane-top {
            transform:rotateX(90deg) translateZ(100px);
        }
        .plane-bottom {
            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>

Mr.王征

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS转换实现旋转的正立方体

效果展示：代码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯CSS画出旋转的正立方体&lt;/title&gt; &lt;style&gt; html { ba
复制链接

扫一扫