Css 围绕中心旋转

好的。我做了不少研究，但什么都没想到。在仔细考虑了这个问题之后，我很感谢你的帮助

我希望能够围绕其中心旋转

，使其背面可见。我可以用

rotateY

——没有任何问题。但是当使用

rotateX

时，

不再围绕其中心旋转

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);

这个问题快把我逼疯了。我知道这是我忽略的一件小事；但是我找不到它。如有任何帮助或提示，将不胜感激。：）

---

对于垂直旋转，您需要指定

变换原点

，包括：

• ：50%

• ：div的一半高度

---

这太完美了。我已经爱你了。非常感谢你！不客气。我更新了我的提琴，把这两个例子并排给出。为什么不带前缀的

转换原点

不同呢？@Zeaklous不抱歉，只是一个打字错误。了不起的作品zessx。两个版本并排是完美的。

.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;
}