CSS Сброс блоков после вращения (трансформация)

Я пытаюсь сделать определенное изображение, которое вращается вокруг, когда мышь витает в объекте. Если я делаю это вращение по оси Y, все работает отлично, однако, когда я делаю это на Ось X имеет тенденцию терпеть неудачу, как в примере ниже.CSS Сброс блоков после вращения (трансформация)

EDIT: Я использую 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

Изображение сбрасывается на зеленую сторону, когда анимация завершена – Azrael

Вот как работает переход: если вы потеряете состояние: hover, у вас есть переход к начальному состоянию – fcalderan

Если удалить transform: rotateX(180deg); из .card .back он правильно работает и на 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

Ваш код инвертирует цвета, но я найду обходное решение для этого, спасибо! я буду отмечать его как тент, как только мне позволено это сделать. – Azrael

CSS Сброс блоков после вращения (трансформация)

ответ

Смежные вопросы