CSS 3假的3D立方体旋转2盒之间 [英] CSS 3 fake 3D cube rotation between 2 boxes

查看：112
本文介绍了CSS 3假的3D立方体旋转2盒之间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用css实现了一个翻转旋转：

  .flip-card {
 position：relative; 
 z-index：1; 
 -webkit-perspective：1000px; 
 -moz-perspective：1000px; 
 -o-perspective：1000px; 
透视：1000px; 
} 
 
 .flip-card-content {
 width：100％; 
 height：100％; 
 -webkit-transform-style：preserve-3d; 
 -webkit-transition：all 0.5s ease-in-out; 
 -moz-transform-style：preserve-3d; 
 -moz-transition：all 0.5s ease-in-out; 
 -o-transform-style：preserve-3d; 
 -o-transition：all 0.5s ease-in-out; 
 transform-style：preserve-3d; 
 transition：all 0.5s ease-in-out; 
} 
 
 .flip-card.flip-x.flipped .flip-card-content，
 .flip-card.flip-x .flip-card-side.flip -card-back {
 -webkit-transform：rotateX（180deg）; 
 -moz-transform：rotateX（180deg）; 
 -o-transform：rotateX（180deg）; 
 transform：rotateX（180deg）; 
} 
 
 .flip-card.flip-x-inverse.flipped .flip-card-content，
 .flip-card.flip-x-inverse .flip-card -side.flip-card-back {
 -webkit-transform：rotateX（-180deg）; 
 -moz-transform：rotateX（-180deg）; 
 -o-transform：rotateX（-180deg）; 
 transform：rotateX（-180deg）; 
} 
 
 .flip-card.flip-y.flipped .flip-card-content，
 .flip-card.flip-y .flip-card-side.flip -card-back {
 -webkit-transform：rotateY（180deg）; 
 -moz-transform：rotateY（180deg）; 
 -o-transform：rotateY（180deg）; 
 transform：rotateY（180deg）; 
} 
 
 .flip-card.flip-y-inverse.flipped .flip-card-content，
 .flip-card.flip-y-inverse .flip-card -side.flip-card-back {
 -webkit-transform：rotateY（-180deg）; 
 -moz-transform：rotateY（-180deg）; 
 -o-transform：rotateY（-180deg）; 
 transform：rotateY（-180deg）; 
} 
 
 .flip-card-side {
 position：absolute; 
 width：100％; 
 height：100％; 
 -webkit-backface-visibility：hidden; 
 -moz-backface-visibility：hidden; 
 -o-backface-visibility：hidden; 
 backface-visibility：hidden; 
}

您可以在这里看到一个例子： http://jsfiddle.net/jckMg/



但是，现在我看到了这个惊人的效果： http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19
我想重现相同的转换，但是我不明白它是如何工作的，或者更好地我理解，它使用伪选择器注入数据，但我不明白重构我的想法有两个div在他们之间切换，而不是。
如何做？



更新：



最后一个实验实现是： http://jsfiddle.net/w7y4N/
只适用于Firefox（在Chrome和Safari中）

解决方案

UPDATE：这是被接受的答案。我的第一个答案包括错误的动画，由于我使用 rotate-3d 属性，它不工作在IE。



由于IE不支持preserve-3d，我修改了代码来单独旋转eache，但是只有两个div不大的交易和代码是相当干净。使用Chrome 31，FF26，O18和IE10在Windows上测试。在IE9它只是翻转内容，而不做冷静的过渡，但仍然工作。对于更多的遗留支持，我可能只是使用modernizr类来切换边的可见性。



DEMO



HTML 

 < div class =flip-card-content> 
< div class =flip-card-side-astyle =background：red> 
 FRONT 
< / div> 
< div class =flip-card-side-bstyle =background：green> 
 BACK 
< / div> 
< / div> 
 
< button id =button> Flip< / button>

CSS （使用SCSS，为简洁起见省略供应商前缀）

  .flip-card-content {
 position：relative; 
 margin：100px; 
 width：200px; 
 height：200px; 
 transform-style：preserve-3d; 
透视：1000px; 
} 
 
 .flip-card-side-a，
 .flip-card-side-b {
 width：100％; 
 position：absolute; 
 height：100％; 
 backface-visibility：hidden; 
 transform-origin：50％50％; 
 transition：all .5s ease-in-out; 
} 
 
 .flip-card-side-a {
 transform：rotateY（0deg）translateZ（100px）; 
 z-index：1; //修复FF和Opera中的错误行为
} 
 .flip-card-side-b {
 transform：rotateY（90deg）translateZ（100px）; 
} 
 
 .flip .flip-card-side-a {
 transform：rotateY（-90deg）translateZ（100px）; 
} 
 .flip .flip-card-side-b {
 transform：rotateY（0deg）translateZ（100px）; 
 z-index：1; 
} 
  
 
 
 
 
 
 
在它的中心，你通过将 transform-origin 属性设置为某个值（在这种情况下顶部和中心）来更改。因为我们改变原点的变换旋转div为180deg会把它放在红色div，所以我们必须旋转270deg把它水平放在飞机上，因此看不见。 
 
 
 
  DEMO  
 
I've implemented a flip rotation using css:
.flip-card {
    position: relative;
    z-index: 1;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

You can see an example here: http://jsfiddle.net/jckMg/



But, now I seen this amazing effect: http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19
And I want to reproduce the same transition, but I don't understand how it works, or better I understand that it makes use of pseudo selectors to "inject data", but I don't understand how to refactor my idea of having 2 divs switching between them instead of that.
How can be done?



UPDATE: 



The last experimental implementation is this: http://jsfiddle.net/w7y4N/
which works perfectly only in Firefox (in Chrome and Safari it's buggy)… can you fix it to be crossbrowser?
 解决方案 
UPDATE: This is accepted answer. My first answer included wrong kind of animation and since I used rotate-3d property, it wasn't working in IE. For reference, my first answer is left below accepted one.



Since IE doesn't support preserve-3d I modified code to rotate eache side seperately but for just two div's it's not big deal and code is pretty clean. Tested on Windows in Chrome 31, FF26, O18 and IE10. In IE9 it just flips content without making cool transition, but still works. For more legacy support I would probably just toggle sides visibility using modernizr classes.



DEMO



HTML
<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
</div>

<button id="button">Flip</button>

CSS (Using SCSS, vendor prefixes omitted for brevity)
.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-card-side-a,
.flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1; // fixes buggy behavior in FF and Opera
}
.flip-card-side-b {
  transform: rotateY(90deg) translateZ(100px);
}

.flip .flip-card-side-a {
  transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}







By default css rotates objects around it's center and you change that by setting transform-origin property to some value (in this case top and center). Since we changed origin point for transform rotating div for 180deg would put it above red div so we must rotate 270deg to put it up horizontally on the plane thus invisible. We get cool flip affect by setting rotate back to 0deg on click or whatever.



DEMO


                        
这篇关于CSS 3假的3D立方体旋转2盒之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆