disissid
06-24-2014, 05:11 AM
How to flip div using CSS 3-D transformation and transitions without using jquery/javascript??
If you are looking for something like this you are at right place, this is kind of a tutorial to do CSS 3-D flip.Okay lets get started with our HTML code.
<section class="container" >
<div id="card">
<figure class="front"></figure>
<figure class="back face"></figure>
</div>
</section>
Figure: Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
Now lets start styling our HTML in CSS.
.container {
width: 259px;
height: 350px;
position: relative;
margin: 10px auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
To activate 3-D space, an element needs perspective. The value of perspective determines the intensity of the 3-D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.perspective: 2000; yields a subtle 3-D effect, as if we were viewing an object from far away.perspective: 100; produces a tremendous 3-D effect, like a tiny insect viewing a massive object.
...cont http://hilreative.blogspot.in/2014/06/css-3-d-flip.html
If you are looking for something like this you are at right place, this is kind of a tutorial to do CSS 3-D flip.Okay lets get started with our HTML code.
<section class="container" >
<div id="card">
<figure class="front"></figure>
<figure class="back face"></figure>
</div>
</section>
Figure: Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
Now lets start styling our HTML in CSS.
.container {
width: 259px;
height: 350px;
position: relative;
margin: 10px auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
To activate 3-D space, an element needs perspective. The value of perspective determines the intensity of the 3-D effect. Think of it as a distance from the viewer to the object. The greater the value, the further the distance, so the less intense the visual effect.perspective: 2000; yields a subtle 3-D effect, as if we were viewing an object from far away.perspective: 100; produces a tremendous 3-D effect, like a tiny insect viewing a massive object.
...cont http://hilreative.blogspot.in/2014/06/css-3-d-flip.html