怎么可以让正方体沿着中心旋转？-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：3-4 编程挑战

学习之王

2017-09-07 15:57

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

写回答关注

3回答

恰逢暮雪

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>

0 0
好吃的蛋包饭

2018-06-07 17:34:09

加一个关键帧动画
@-webkit-keyframes s{
    0%{
        -webkit-transform:rotateY(0);
    }
    100%{
        -webkit-transform:rotateY(-359.9deg);
    }
}

0 0
宝慕林1501584

2017-11-20 10:28:24

http://www.w3school.com.cn/cssref/pr_transform-origin.asp
查看这个文档就可以了，调整你的transform-origin 在 x y z 三个轴上的位置为 50%

1 0

学习之王

不是这样的，是正方体，不是正方形

2018-01-09 16:00:13

共 1 条回复 >

CSS3 3D 特效

使用CSS3当中的属性，创建真实可用的三维效果

78574 学习 · 425 问题

相似问题

回答 3

回答 4

回答 1

回答 2

正方体中的数字是反的

回答 1

打开慕课网App查看更多内容