css3中的旋转有个需要注意的点

一般来说，如果要将元素居中，可能会采取以下方式：

.box{
    width:300px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
}

如果，要旋转的是个正方体，用这样的方式把第一个面固定在中间，
要对其进行旋转，那么此时旋转的中心点就不在最中间。
如以下代码：
css:

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        .cube{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -150px;
            transform-style: preserve-3d;
            perspective: 0px;
            animation: RubicsCube 8s linear 0s infinite;
        }
        .cube:hover {
            animation-play-state: paused;
        }
        .cube>div>div{
            float: left;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            border-radius: 20px;
            margin: 5px;
        }
        .cube>div{
            position: absolute;
            width: 300px;
            height: 300px;
        }
        .f>div{
            background-color: red;
        }
        .b>div{
            background-color: orange;
        }
        .u>div{
            background-color: yellow;
        }
        .d>div{
            background-color: white;
        }
        .l>div{
            background-color: blue;
        }
        .r>div{
            background-color: green;
        }
        .f{
            transform: translateZ(150px);
        }
        .b{
            transform: rotateY(180deg)translateZ(150px);
        }
        .u{
            transform: rotateX(90deg) translateZ(150px);
        }
        .d{
            transform: rotateX(-90deg) translateZ(150px);
        }
        .l{
            transform: rotateY(-90deg) translateZ(150px);
        }
        .r{
            transform: rotateY(90deg) translateZ(150px);
        }
        @keyframes RubicsCube {
            0%{transform: rotateX(0deg) rotateY(0deg)}
            12.5%{transform: rotateX(30deg) rotateY(180deg)}
            25%{transform: rotateX(0deg) rotateY(360deg)}
            37.5%{transform: rotateX(-30deg) rotateY(540deg)}
            50%{transform: rotateX(0deg) rotateY(720deg)}
            62.5%{transform: rotateX(30deg) rotateY(900deg)}
            75%{transform: rotateX(0deg) rotateY(1080deg)}
            87.5%{transform: rotateX(-30deg) rotateY(1260deg)}
            100%{transform: rotateX(0deg) rotateY(1440deg)}
        }

html:

<div class="cube">
    <div class="f">
        <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="b">
        <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="u">
        <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="d">
        <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="l">
        <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="r">
        <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>

这里没有给魔方按z轴旋转，没有给魔方设置旋转中心，本来是想达到按y轴旋转并按x轴上下翻的效果，但是魔方整体会左右飘。如果如果将旋转中心设置如下就ok了：

transform-origin: 150px 150px 0px;