综合编程

How do I create 3D perspective using CSS3?

微信扫一扫,分享到朋友圈

How do I create 3D perspective using CSS3?
0

I have been trying to create a 3D looking card-flip type of animation for a project I’ve been working on. Unfortunately my animation doesn’t look entirely 3D.

I’ve been using this <a href="http://css3.bradshawenterprises.com/flip/” >guide . In the first example the person managed to make it look like the windows background was flipping. However when I tried to use the same code on JSFiddle the result was not the same as his.

His demo code made the effect below. When the card is being flipped it causes one side to get smaller giving the impression of perspective:

On my JSFiddle using his code (except a different background), the sides appear to stay the same size the entire time:

Can someone explain to me what I have missed, or how to get the same perspective effect he had on his website?Thanks in advance.

His HTML code:

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="/images/Windows%20Logo.jpg"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

His CSS code:

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

Problem courtesy of: Harvey

Solution

See where he says he’s stripped the vendor prefixes out of his CSS to keep things clean? I’m betting that’s your problem. Some of those CSS properties aren’t fully standard, but are implemented in different browsers with different vendor prefixes. I’m not actually sure which ones, but Google can help with that.

Edit: Hmm. Well, the CSS is the culprit anyway, but I don’t actually see a lot of vendor prefixes. I pulled his actual CSS off of the page, and pasted it in place of the "clean" CSS you used, which makes the fiddle work. His real CSS is:

#f1_container {
    height: 281px;
    margin: 10px auto;
    position: relative;
    width: 450px;
    z-index: 1;
}
#f1_container {
    perspective: 1000px;
}
#f1_card {
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s linear 0s;
    width: 100%;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
    box-shadow: -5px 5px 5px #AAAAAA;
    transform: rotateY(180deg);
}
.face {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}
.face.back {
    -moz-box-sizing: border-box;
    background-color: #AAAAAA;
    color: #FFFFFF;
    display: block;
    padding: 10px;
    text-align: center;
    transform: rotateY(180deg);
}

Solution courtesy of: user1618143

Discussion

They had some CSS incorrect…in the example, he had class .back.face , which should have been .face.back (not why it wasn’t working, as pointed out. Just cleaned it up). Other issues were the culprit as other posters pointed out. I’ve created a new jsFiddle. I’d go the jQuery flip plug-in over this though, as IE will have a hard time rendering such effect.

http://jsfiddle.net/JJrHD/1/

Discussion courtesy of: Mike Barwick

This recipe can be found in it’s original form on Stack Over Flow .

阅读原文...


微信扫一扫,分享到朋友圈

How do I create 3D perspective using CSS3?
0

CSS3 Recipes

【新营销随笔】315将至:危机无大小,永远不做“背锅侠”!

上一篇

如何截取网易云音乐的歌曲

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

How do I create 3D perspective using CSS3?

长按储存图像,分享给朋友