How do I create 3D perspective using CSS3?


Tags: html,css3

Problem :

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 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: enter image description here

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

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


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

    CSS Howto..

    Div Title on div border how to [closed]

    How to make text float on top of an image html css

    How to use 100% CSS background-image with scrolling content?

    Slideshow using background images with navigation and captions

    How can I call ajax, without “link_to” kind of helpers?

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?

    .NET - How to build themes for big CSS files

    HTML CSS - How to render SQL nicely [closed]

    How to give Internet Explorer different CSS lines?

    How to assign a class or ID to a table within a JavaScript function?

    CSS radio button border how to remove it?

    How can I get good errors from the LESS compiler when integrated in Symfony 2

    How can I make my container transparent without making the whole site transparent too?

    How to customize Subscribe2 button appearance in WordPress?

    css how to center this content

    How can I achieve this layout using CSS only?

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    How to include css and jquery in joomla component

    How to get table to overflow within a flex div?

    How to style Java FX TableView column header using CSS

    How to play a video inside a logo

    Responsive Design - how to get my image on left to take up whole screen

    How to use easily svg as icon?

    Slideshow picture disapears

    How to align navigation links after navigation menu is collapsed using bootstrap

    why is .show() making the target div appear at top of page?

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How to change hover background on links in css?

    How to fit number within defined div in css

    sunken border when background-color css specified - how to avoid?