Question

所以我正在玩CSS3和HTML5 on my page试图保持最新。我正在玩新的CSS转换的rotateY设置，我想知道是否有一种方法来翻转它有两个不同的边但只使用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-property中的内容，以指定我想要旋转元素，所以谢谢你：）

Paul Bakaus有一个很好的iPhone翻转动画，它涉及javascript（和jQuery）按下按钮时翻转： http://paulbakaus.com/lab/css/flip/

Answer 5

我认为这些答案都不足够。

我的方法是在3维空间中将卡片的“背面”部分放在正面部分之后，然后将其翻转。我添加了动画来演示它的工作原理。

<style>
body {
  /* This could be moved to the card definition to provide a slightly different effect. */
  perspective-origin: center; 
  perspective: 100vh;
}

.card {
  width: 25vw;
  height: 30vw;
  animation: 10s infinite;
  animation-timing-function: linear;
  animation-name: flip; 
  /* This is very important - we need to make sure the flippy respects our z-index */
  transform-style: preserve-3d;
}
.card > div {
  /* Also we need to make sure that we can put things on top of each other easily */ 
  position: absolute;
  height: 100%;
  width: 100%;
}
.front {
  background: red;
}
.back {
  background: blue;
  /* Here's the magic sauce, we put the back slightly behind the front */
  transform: translateZ(-.1px);
}
/* This is more a demonstation that it works more than anything */
@keyframes flip {
  0% {transform: rotate3d(0.5, 0, 0, 0deg); }
  100% {transform: rotate3d(0.5, 0, 0, 360deg); }
}   
</style>
<div class=card>
  <div class=front></div>
  <div class=back></div>
</div>

纯CSS3 rotateY双面翻转

5 个答案: