问答详情
源自:3-4 编程挑战

怎么可以让正方体沿着中心旋转?

怎么可以让正方体沿着中心旋转?

提问者:学习之王 2017-09-07 15:57

个回答

  • 恰逢暮雪
    2021-02-04 16:36:15
    已采纳

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>正方体</title>

    </head>

    <body>

        <div class='out-box'>

            <div class="inner-box">

                <span class="front common">前</span>

                <span class="left common">左</span>

                <span class="right common">右</span>

                <span class="behind common">后</span>

                <span class="top common">上</span>

                <span class="bottom common">下</span>

            </div>

        </div>

        <style>

            body,html{

                width: 100%;

                height: 100%;

                padding: 0;

                margin: 0;

                background-color: antiquewhite;

            }

            .out-box {

                width: 100%;

                height: 100%;

                display: flex;

                justify-content: center;

                align-items: center;

                perspective: 5000px;

                backface-visibility: hidden;

            }

            .inner-box {

                width: 300px;

                height: 300px;

                position: relative;

                transform-style: preserve-3d;

                transform: translatez(-150px) rotateX(30deg) rotateY(30deg) ;

            }

            .front {

                background-color: salmon;

                transform:translatez(150px);

            }

            .behind {

                transform:translatez(-150px);

                background-color: aqua;

            }

            .right {

                background-color: chartreuse;

                transform:rotateY(90deg) translatez(150px) ;

            }

            .left {

                background-color: pink;

                transform:rotateY(-90deg) translatez(150px) ;

            }

            .top {

                background-color: darkcyan;

                transform: rotateX(90deg) translateZ(150px);

            }

            .bottom {

                background-color: coral;

                transform: rotateX(90deg) translateZ(-150px);

            }


            .inner-box:hover  {

               

                transform: translatez(-150px) rotateX(135deg) rotateY(45deg) ;

                transition: all 3s;

            }

            .common {

                position: absolute;

                left: 0;

                right: 0;

                top: 0;

                bottom: 0;

                margin: auto;

                display: block;

                text-align: center;

                font-size: 35px;

                font-weight: bold;

                color: #fff;

                width: 300px;

                height: 300px;

                line-height: 300px;

               

            }

        </style>

    </body>

    </html>


  • 好吃的蛋包饭
    2018-06-07 17:34:09

    加一个关键帧动画

    @-webkit-keyframes s{
        0%{
            -webkit-transform:rotateY(0);
        }
        100%{
            -webkit-transform:rotateY(-359.9deg);
        }
    }

  • 宝慕林1501584
    2017-11-20 10:28:24

    http://www.w3school.com.cn/cssref/pr_transform-origin.asp

    查看这个文档就可以了,调整你的transform-origin 在 x y z 三个轴上的位置为 50%