码迷,mamicode.com
首页 > 其他好文 > 详细

超级无敌海景拽掉咋天的魔方

时间:2018-05-24 01:13:09      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:char   div   组织   info   lte   ima   nat   ram   sed   

好吧,请无视标题。

这是一个CSS3的魔方

技术分享图片

1.HTML

    <div class="box">
        <div class="before face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="back face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="top face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="bottom face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="left face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
        <div class="right face">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>

 

2.CSS

     body {
            /*background-color: azure;*/
            background-image: linear-gradient(180deg, blue, azure );
            background-repeat: no-repeat;
        }

        .box {
            width: 300px;
            height: 300px;
            margin: 150px auto;
            position: relative;
            font-size: 50px;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite alternate;
        }

        .face {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
            position: absolute;
        }

            .face div {
                width: 90px;
                height: 90px;
                border-radius: 20px;
                margin: 5px;
                text-align: center;
                line-height: 90px;
            }

        .right {
            background-color: transparent;
            transform: rotateY(90deg) translateZ(150px);
        }

        .left {
            background-color: transparent;
            transform: rotateY(-90deg) translateZ(150px);
        }

        .top {
            background-color: transparent;
            transform: rotateX(90deg) translateZ(150px);
        }

        .bottom {
            background-color: transparent;
            transform: rotateX(-90deg) translateZ(150px);
        }

        .before {
            background-color: transparent;
            transform: translateZ(150px);
        }

        .back {
            background-color: transparent;
            transform: translateZ(-150px);
        }

        .before div {
            background-color: green;
        }

        .back div {
            background-color: chartreuse;
        }

        .top div {
            background-color: purple;
        }

        .bottom div {
            background-color: cornflowerblue;
        }

        .left div {
            background-color: darkorange;
        }

        .right div {
            background-color: #37ffc7;
        }

        .box:hover {
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
            }
        }

.box, .face组织了魔方。

.right, .left, .top, .bottom, .before, .back 定义了了6个面,分别放到3D座标上。

        .right {
            background-color: transparent;
            transform: rotateY(90deg) translateZ(150px);。
        }

        .left {
            background-color: transparent;
            transform: rotateY(-90deg) translateZ(150px);
        }

        .top {
            background-color: transparent;
            transform: rotateX(90deg) translateZ(150px);
        }

        .bottom {
            background-color: transparent;
            transform: rotateX(-90deg) translateZ(150px);
        }

        .before {
            background-color: transparent;
            transform: translateZ(150px);
        }

        .back {
            background-color: transparent;
            transform: translateZ(-150px);
        }

 

动画部分,定义了0%,20%,40%,60%,80%,100%的动画。

        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
            }
        }

 

超级无敌海景拽掉咋天的魔方

标签:char   div   组织   info   lte   ima   nat   ram   sed   

原文地址:https://www.cnblogs.com/Ivan83/p/9080472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!