[英]CSS Animation: `backface-visibility` causing cross-browser problems?
我正在開發一個翻轉 animation 來顯示新數字； 它很像一個模擬時鍾或日歷，中間有鉸鏈。
方法很簡單：有一個div ：
為了顯示新數字，我將整個 div 圍繞容器中心旋轉，顯示旋轉div的背面： Number flip animation in latest Firefox
但是，在 Chrome 中，animation 並不總是有效。 有時一半完全消失，直到過渡 animation 完成，有時舊數字不呈現：數字翻轉 animation 在最新的 Chrome 中，數字的底部直到 animation 完成后才出現
In Safari 12, it's worse, it doesn't seem to respect backface-visibility , even with the -webkit- prefix: Safari 12 Number animation, the bottom half of the first number is inverted after animation is complete
Pre-Chromium Edge 可以很好地處理這個問題，但是新的（在 v83 中檢查）Edge 與 Chrome 有相同的問題。
我試過弄亂這些屬性，並在這里查看了其他backface-visibility問題。
這是代碼，hover 在數字上看到翻轉：
body { background: #2e517d; }.container { width: 175px; height: 192px; background: #4e9bfa; position: relative; left: 50%; transform: translate(-50%, 50%); perspective: 1000px; }.cover { width: 175px; height: 50%; position: absolute; top: 96px; background-color: #34b58c; transform: rotateX(0deg); transform-style: preserve-3d; transform-origin: top; transition: all 0.5s ease-out; }.container:hover.cover { transform: rotateX(180deg); }.flip { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.container p { font-size: 1000%; margin: 0; }.container>p { height: 96px; overflow: hidden; }.front-number-bottom { position: relative; height: 96px; overflow: hidden; background-color: red; }.front-number-bottom p { margin: 0; position: relative; top: -96px; }.back-number-top { position: relative; height: 96px; overflow: hidden; }.back-number-bottom { height: 96px; overflow: hidden; position: relative; z-index: -1; }.back-number-bottom p { margin: 0; position: relative; top: -96px; } div.front { background: red; } div.back { background: green; transform: rotateX(180deg); }
<body> <div class="container"> <p>76</p> <div id="cover" class="cover"> <div class="flip front"> <div class="front-number-bottom"> <p>76</p> </div> </div> <div class="flip back"> <div class="back-number-top"> <p>77</p> </div> </div> </div> <div class="back-number-bottom"> <p>77</p> </div> </div> </div> </body>
這是一種可以在 Chromium 瀏覽器和 Safari 中輕松修復的合理方法嗎？
不同的方法會更好嗎？
我猜你的代碼有點復雜。 我會簡化你的邏輯，如下所示，你不再需要backface-visibility: hidden;
注意兩個重要事項的用法：
90deg時） 1更改 z-index。 .card { width: 175px; height: 192px; position: relative; z-index:0; left: 50%; transform: translate(-50%, 50%); font-size: 160px; }.card span, .card span::before, .card span::after { position:absolute; top:0; left:0; right:0; bottom:0; }.card span { position:absolute; z-index:2; perspective: 1000px; }.card span:first-child { z-index:3; transition:0s 0.25s all linear; }.card span::before, .card span::after{ content:attr(data-number); -webkit-mask:linear-gradient(#fff,#fff) top/100% 50% no-repeat; mask:linear-gradient(#fff,#fff) top/100% 50% no-repeat; background:red; transition:0.5s all linear; transform-style: preserve-3d; }.card span::after { -webkit-mask-position:bottom; mask-position:bottom; background:green; }.card span:first-child::after { transform: rotateX(0deg); }.card span:last-child::before { transform: rotateX(-180deg); } /* Hover */.card:hover span:first-child { z-index:1; }.card:hover span:first-child::after { transform: rotateX(180deg); }.card:hover span:last-child::before { transform: rotateX(0deg); }
<div class="card"> <span data-number="76"></span> <span data-number="77"></span> </div>
蒙版也可以用剪輯路徑替換：
.card { width: 175px; height: 192px; position: relative; z-index:0; left: 50%; transform: translate(-50%, 50%); font-size: 160px; }.card span, .card span::before, .card span::after { position:absolute; top:0; left:0; right:0; bottom:0; }.card span { z-index:2; perspective: 1000px; }.card span:first-child { z-index:3; transition:0s 0.25s all linear; }.card span::before, .card span::after{ content:attr(data-number); clip-path:polygon(0 0,100% 0,100% 50%,0 50%); background:red; transition:0.5s all linear; transform-style: preserve-3d; }.card span::after { clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%); background:green; }.card span:first-child::after { transform: rotateX(0deg); }.card span:last-child::before { transform: rotateX(-180deg); } /* Hover */.card:hover span:first-child { z-index:1; }.card:hover span:first-child::after { transform: rotateX(180deg); }.card:hover span:last-child::before { transform: rotateX(0deg); }
<div class="card"> <span data-number="76"></span> <span data-number="77"></span> </div>
另一個使用counter的優化，沒有設置明確的寬度/高度
.card { margin:0 5px; font-family:monospace; display:inline-block; text-align:center; position: relative; z-index:0; font-size: 150px; counter-reset:num calc(var(--n,1) - 1); } /* this will defined the height/width*/.card::after { content:counter(num); visibility:hidden; } /**/.card span, .card span::before, .card span::after { position:absolute; top:0; left:0; right:0; bottom:0; }.card span { z-index:2; perspective: 1000px; counter-increment:num; }.card span:first-child { z-index:3; transition:0s 0.25s all linear; }.card span::before, .card span::after{ content:counter(num); clip-path:polygon(0 0,100% 0,100% 50%,0 50%); background:red; transition:0.5s all linear; transform-style: preserve-3d; }.card span::after { clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%); background:green; }.card span:first-child::after, .card:hover span:last-child::before{ transform: rotateX(0deg); }.card span:last-child::before { transform: rotateX(-180deg); }.card:hover span:first-child::after { transform: rotateX(180deg); }.card:hover span:first-child { z-index:1; }
<div class="card" style="--n:75"> <span></span><span></span> </div> <div class="card" style="--n:5"> <span></span><span></span> </div> <div class="card" style="--n:100"> <span></span><span></span> </div>
1使用linear時它非常簡單，但使用其他緩動功能則更加棘手。 這里有一個相關的問題可以幫助您識別緩動函數的中間點：緩動函數 animation究竟什么時候到達它的中點？
創建:: after偽元素會導致背面可見性問題
[英]Creating ::after pseudo element causing problems with backface-visibility
CSS 透視翻轉 animation 在 Safari 中閃爍，盡管背面可見性：隱藏
[英]CSS perspective flip animation flicker in Safari despite backface-visibility:hidden
與 animation 一起使用時，背面可見性不起作用
[英]backface-visibility doesn't work when used together with an animation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.