純粹的CSS3 rotateY雙面翻轉

所以我玩弄CSS3和HTML5 on my page試圖保持最新。我正在玩新的CSS轉換的rotateY設置，我想知道是否有辦法翻轉某些東西，它有兩個不同的方面，但只使用CSS和HTML。我搜索了互聯網，沒有找到任何教程。純粹的CSS3 rotateY雙面翻轉

無論如何，我想出了這個。（也可以在頁面底部附近的鏈接中找到）

當然，要看到這種效果，必須在Webkit瀏覽器中查看它。

HTML

<div class="flip"> 
<div> 
<img src="images/yyc.jpg" alt="Calgary International Airport"/> 
    <section> 
    <h3>Image Metadata</h3> 
    <p><strong>Where:</strong> Calgary International Airport</p> 
    <p><strong>When:</strong> July 25, 2008</p> 
    <p><strong>Camera:</strong> Canon EOS 30D</p> 
    <p><strong>Photographer:</strong> <a href="http://photo.net/photos/Vian" title="Photo.net">Vian Esterhuizen</a></p> 
    </section> 
</div> 
</div>

CSS

.flip{ 
    float:left; 
    position:relative; 
    width:421px; 
    height:237px; 
    background:#111; 
    border:2px solid #111; 
    margin:2px 0; 
    -webkit-transition-property: -webkit-transform, background; 
    -webkit-transition-duration: 1s, 0; 
    -webkit-transition-delay: 0, 0.3s; 
    overflow:hidden; 
} 
.flip:hover{ 
    -webkit-transform: rotateY(180deg); 
} 
.flip > div{ 
    position:absolute; 
    left:0; 
    top:0; 
    width:842px; 
    height:237px; 
    overflow:hidden; 
    -webkit-transition-property: left; 
    -webkit-transition-duration: 0; 
    -webkit-transition-delay: 0.3s; 
} 
.flip > div img{ 
    float:left; 
    width:421px; 
    height:237px; 
    -webkit-transition-property: -webkit-transform; 
    -webkit-transition-duration: 0; 
    -webkit-transition-delay: 0.3s; 
} 
.flip > div > section{ 
    float:left; 
    width:401px; 
    height:217px; 
    padding:10px; 
    background:top right url('../images/esterhuizen-photography.gif') no-repeat; 
    -webkit-transition-property: -webkit-transform; 
    -webkit-transition-duration: 0; 
    -webkit-transition-delay: 0.3s; 
} 
.flip:hover > div{ 
    left:-421px; 
} 
.flip:hover > div img, .flip:hover > div > section{ 
    -webkit-transform: rotateY(180deg); 
}

是的，我知道這可能是這樣一個簡單的動作太多的標記，但我想看看是否有可能。

所以我的問題是，我編造了這種技術，但有沒有更好，更有效的一個，我沒有找到？或者，有沒有更好/更有效的方式來做我所做的事情？

謝謝

來源

2010-10-04 Vian Esterhuizen

哇，令人印象深刻！這可能會有一些jQuery解決方案，但我可以說這樣做非常好！ – Kyle 2010-10-05 08:26:03

好，謝謝。我看到很多jQuery選項，但我確信有一種方法可以不用。 – 2010-10-06 00:01:10

我google搜索要放什麼東西在-webkit-過渡屬性來指定，我想旋轉的元素，所以感謝您的:)

保羅Bakaus有一個很好的它涉及JavaScript（和jQuery）使按鈕被按下時翻轉： http://paulbakaus.com/lab/css/flip/

來源

2011-01-10 08:40:14

我認爲你在找什麼是-webkit-backface-visibility。這是webkit特有的，但不是任何標準。

來源

2011-01-11 00:41:21

謝謝，這真的很有幫助。我將不得不玩這個看看它是如何適應我的想法。 P.S.真是巧合，我剛剛開始在Twitter上關注你。 – 2011-01-11 04:37:26

如何：

HTML

<div class="flip1"> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
    FLIP 1<br /> 
</div> 
<div class="flip2"> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
    FLIP 2<br /> 
</div>

CSS

div { 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function:linear; 
    -webkit-backface-visibility: hidden; 
    color: blue; 
    font-family: Helvetica,Arial,sans-serif; 
    font-weight: bold; 
    padding: 20px; 
    position: absolute; 
} 

@-webkit-keyframes flip1 { 
    from { -webkit-transform: rotateX(0deg); } 
    to { -webkit-transform: rotateX(360deg); } 
} 

div.flip1 { 
    -webkit-animation-name: flip1; 
} 

@-webkit-keyframes flip2 { 
    from { -webkit-transform: rotateX(-180deg); } 
    to { -webkit-transform: rotateX(180deg); } 
} 

div.flip2 { 
    -webkit-animation-name: flip2; 
}

來源

2012-03-14 14:37:03 Mike

上面的演示，對於好奇：http://jsfiddle.net/philfreo/fwxQK/ – philfreo 2012-07-02 13:55:11

謝謝，@philfreo – Mike 2012-07-02 20:22:18

這對我的作品;

HTML

<li class="panel"> 
<div class="cards"> 
<div class="front"> 
    <div id="side1"></div> 
</div> 
<div class="back"> 
    <div class="side2"> 
</div> 
</div> 
</div> 
</li>

CSS

.panel { 
width: 300px; 
height: 300px; 
position: relative; 
-webkit-perspective: 1000; 
&:not(:hover) .cards { 
-webkit-animation: CardFlip 15s infinite; 
-webkit-transform-style: preserve-3d; 
} 

.cards, .front, .back { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 20px; 
right: 0; 
} 
.cards { 
-webkit-transition: all 20s linear; 
.front { 
z-index: 2; 
background: url('placeholder.png'); 
-webkit-backface-visibility: hidden; 
} 
.back { 
    z-index: 1; 
    -webkit-transform: scale(-1, 1); 
} 
} 
}

注意;它是一個對角翻轉。

來源

2017-10-02 13:40:22

純粹的CSS3 rotateY雙面翻轉

回答

相關問題