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

Question

Так что я поигрался с CSS3 и HTML5 на своей странице , пытаясь идти в ногу со временем. Я играл с настройкой 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

Как насчет:

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 2

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

Answer 3

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

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

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

Answer 4

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

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