CSS rotateX 围绕中心

Question

好的。我已经做了很多研究，但我什么也想不出来。在可能过度思考这个问题之后，我希望得到你的帮助。

我希望能够旋转 <div>围绕它的中心，所以它的背面变得可见。我能够用 rotateY 做到这一点——没有任何问题。但是当使用 rotateX <div>不再绕其中心旋转。

CSS:

.flip-container {
    font-size: 30px;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    margin: 0 auto;
    color: black;
}

.flip-container:hover .flipper {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

.front {
    z-index: 1;
}

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

.back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);

这个问题让我难以自拔。我知道这是我忽略的小事；但我找不到它。任何帮助或提示将不胜感激。 :)

Fiddle

Answer 1

对于垂直旋转，您需要指定 transform-origin ，有:

• <x> : 50%
• <y> : div的半高

Updated Fiddle

.flipper {    
    -webkit-transform-origin: 50% 100px;    
    -moz-transform-origin: 50% 100px;      
    -o-transform-origin: 50% 100px;    
    -ms-transform-origin: 50% 100px;  
    transform-origin: 50% 100px;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    position: relative;
}