CSS3背面知名度

注：CSS是在codepen例子CSS3背面知名度

背景：我想旋轉一組元素（可以叫他們的父母）爲對齊一列。每位家長有2個孩子（2個面孔：正面和背面）。

<div class="parent"> 
    <div class="front"></div> 
    <div class="back"></div> 
</div> 
<br /> 
<div class="parent"> 
    <div class="front"></div> 
    <div class="back"></div> 
</div> 
<!-- many more -->

動畫將要在時間後添加JavaScript和對問題的目的，讓我們說，將有10列10行，和旋轉在一些Android手機的100個元素與一些蹩腳的瀏覽器肯定會顯得很古怪。

我想避免的是將旋轉動畫添加到每個「父」，因爲我知道每個動畫不會總是在同一時間開始。

我的解決方案：我創建對於每一列（稱爲轉子）的容器元素僅具有旋轉該元件和所有的「父」元素打算同時旋轉。它的工作原理，我知道它有更好的表現。

<!-- one column --> 
<div class="rotator"> 
    <div class="parent"> 
    <div class="front"></div> 
    <div class="back"></div> 
    </div> 
    <br /> 
    <div class="parent"> 
    <div class="front"></div> 
    <div class="back"></div> 
    </div> 
    <!-- many more --> 
</div>

問題：的問題是，如果我轉「父」元素背面能見度纔有效。如果我旋轉「旋轉器」元素，我只能看到「後面」的臉，但從來沒有看到前面。

Here是與旋轉器的解決方案，這是有問題的。

和here是沒有旋轉器的工作示例，這是我想實現的，但使用旋轉器。

問題：我該如何做到這一點，所以使用旋轉元件仍然會允許背面可視性按照應有的方式工作？

來源

2015-04-22 camou

您需要設置保留3D此佈局工作

.rotator { 
    -webkit-animation: rotate 2s linear infinite; 
    animation: rotate 2s linear infinite; 
    width: 10em; 
    height: 10em; 
    transform-style: preserve-3d; /* added */ 
}

codepen

來源

2015-04-22 16:30:16 vals

不能相信解決方案如此簡單..：/謝謝！ – camou

高興，它幫助:-) – vals

我覺得既然你的back和front div在.parent div之內，它就會直接不旋轉div，除非直到你給它提供動畫！因此，您需要將動畫屬性添加到.parent，如下所示。

.parent { 
    position: relative; 
    width: 10em; 
    height: 10em; 
    -webkit-transform-style: preserve-3d; 
    -webkit-animation: rotate 2s linear infinite; 
    animation: rotate 2s linear infinite; 
    transform-style: preserve-3d; 
}

這裏是DEMO

來源

2015-04-22 07:07:17

這正是我試圖避免的。我提供的codepen中的一個例子就是你在這裏所說的 – camou

CSS3背面知名度

回答

相關問題