Чистый CSS3 rotateY переворачивается с двух сторон

Question

Так что я играл с CSS3 и HTML5 on my page, пытаясь быть в курсе последних событий. Я играл с настройкой rotateY нового CSS-преобразования, и мне было интересно, есть ли способ перевернуть что-то, что у него две разные стороны, но с использованием только CSS и HTML. Я искал в Интернете и не нашел учебников.

В любом случае, я придумал это. (Также можно найти по ссылке выше, в нижней части страницы.)

Конечно, чтобы увидеть этот эффект, его необходимо просмотреть в браузере 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); 
} 

Да, я понимаю, что это, вероятно, слишком много разметки для такого простого действия, но я хотел бы видеть, если это возможно.

Итак, мой вопрос в том, что я составил эту технику, но есть ли более эффективная, более эффективная, которую я не нашел? Или, есть ли лучший/более эффективный способ сделать то, что я сделал?

Спасибо

Answer 1

Я за то, прибегая к помощи, чтобы положить в -webkit-перехода-свойства, чтобы указать, что я хотел, чтобы повернуть элемент, так что спасибо за что :)

Пол Bakaus имеет приятный флип-анимации для iPhone, она включает в себя JavaScript (и JQuery), чтобы сделать сальто, когда нажата кнопка: http://paulbakaus.com/lab/css/flip/

Answer 2

Я думаю, что вы ищете -webkit-backface-visibility. Это специфический webkit, но не в каких-либо стандартах.

Answer 3

Как насчет:

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; 
} 

Answer 4

Это работает для меня;

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); 
} 
} 
} 

Примечание; Его диагональный флип.