我正在閱讀一篇關于 CSS-3D 的博客文章。它在某處提到設定屬性的問題transform-style: preserve-3d未按預期作業。他沒有解釋原因，只是想了個別的辦法來解決這個問題。你能解釋一下為什么我們不能在容器中設定有問題的屬性嗎？
https://codepen.io/thebabydino/pen/ZppXbb/
我正在閱讀的博客鏈接：
https://css-tricks.com/things-watch-working-css-3d/
uj5u.com熱心網友回復：
設定border-radius為face，它應該可以正常作業。
或查看代碼筆
$dim: 40vmin;
body {
overflow: hidden;
margin: 0;
height: 100vh;
perspective: 20em;
}
div {
position: absolute;
width: $dim; height: $dim;
}
.face {
border-radius: 50%;
}
.card {
top: 50%; left: 50%;
margin: -.5*$dim;
border-radius: 50%;
transform-style: preserve-3d;
text-align: center;
font: calc(1em 10vmin)/#{$dim}
trebuchet ms, verdana, arial, sans-serif;
// shorthand doesn't work in Firefox :(
// bug 1304014
font-size: calc(1em 10vmin);
line-height: $dim;
font-family: trebuchet ms, verdana, arial, sans-serif;
animation: rot 4s ease-in-out infinite;
}
@keyframes rot {
50% { transform: rotateY(.5turn); }
100% { transform: rotateY(1turn); }
}
.face {
backface-visibility: hidden;
background: #ee8c25;
&:last-child {
transform: rotateY(.5turn);
background: #d14730;
}
}<div class='card'>
<div class='face'>front</div>
<div class='face'>back</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386903.html
標籤：css
上一篇：Flexbox高度和背景圖片高度