CSS块重置后旋转（变换）

我想使鼠标悬停在对象周围旋转的某些图像，如果我在Y轴上执行此旋转一切正常，但是当我这样做的时候X轴一切都倾向于失败，如下面的例子。CSS块重置后旋转（变换）

编辑：我使用的是Chrome浏览器，现在看起来更进一步，Internet Explorer甚至不显示红色的脸。

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateX(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    transform: rotateX(180deg); 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

正确的版本（Y版）：

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateY(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    transform: rotateY(180deg); 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

来源

2014-09-23 Azrael

这似乎是一个正确的旋转沿x轴对我 – fcalderan 2014-09-23 10:08:51

动画完成时，图像重置为绿色一侧 – Azrael 2014-09-23 10:09:19

这是过渡的工作原理：如果您失去：悬停状态，您将转换到初始状态 – fcalderan 2014-09-23 10:10:30

如果从.card .back删除transform: rotateX(180deg);它正常工作还对Chrome的

.card-container { 
 
    height: 150px; 
 
    perspective: 600; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 
.card { 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: all 1s ease-in-out; 
 
    width: 100%; 
 
    background: green; 
 
} 
 
.card:hover { 
 
    transform: rotateX(180deg); 
 
} 
 
.card .side { 
 
    backface-visibility: hidden; 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.card .back { 
 
    background: red; 
 
}

<div class="card-container"> 
 
    <div class="card"> 
 
    <div class="side"></div> 
 
    <div class="side back"></div> 
 
    </div> 
 
</div>

来源

2014-09-23 10:24:34 fcalderan

您的代码会倒转颜色，但我会为此寻找解决方法，谢谢！一旦允许我这样做，我会尽快将其标记为一个awnser。 – Azrael 2014-09-23 10:26:58

CSS块重置后旋转（变换）

回答

相关问题