Я пытаюсь реализовать эффект переворачивания карты и поэтому использую backface-visibility: hidden;
для "перевернутых" элементов.Это работает для элементов HTML в Firefox и Chrome, а также для элементов SVG в Firefox.Тем не менее, он не работает для svg с Chrome.
В Chrome 180-градусные «перевернутые» элементы svg все еще видны, даже если задняя сторона видимости установлена на скрытый.
Я также тестировал с / без transform-style: preserve-3d;
и оба с -webkit
префиксом
Минимальный пример:
HTML:
<svg>
<g class="flip">
<rect id="svg-box1" width="100" height="50"/>
<text x="10px" y="20px">
Flip svg
</text>
</g>
</svg>
<div class="flip">
<div id="div-box1">
<p>Flip div</p>
</div>
</div>
CSS:
svg {
overflow: visible;
height: 50px;
width: 300px;
}
.flip div {
height: 50px;
width: 100px;
background: orange;
}
.flip p {
padding: 10px;
}
rect {
fill: orange;
}
.flip {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
Вот также JSFiddle: https://jsfiddle.net/nf4me6bd/
Справочная информация:
Я пытаюсь реализовать эффект переворачивания карты с помощью CSS.Я нашел много примеров, и я могу заставить работать базовую версию.Однако я бы хотел, чтобы моя «карточка» была перекошенной.Содержимое блоков очень размыто, когда я использую только элементы HTML с CSS (из-за перекоса преобразования и не перекоса содержимого блока).Поэтому я сейчас пытаюсь использовать элементы svg.
Система: Linux с Chrome версии 74.0 (64-разрядная версия) и Firefox 67.0 (64-разрядная версия)
Аналогичный вопрос
Существует этот вопрос от 2 лет назад, который в основном описывает ту же проблему (очевидно, с более старой версией Chrome).Поскольку на вопрос так и не был получен ответ, но он был задан для примера CodePen / JSFiddle, я решил задать свою версию вопроса с запрошенным JSFiddle.