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

CSS rotateX围绕中心

1 个答案: