Introduction to CSS 3D Transformations (3D transform)

Https://desandro.github.io/3dtransforms/docs/card-flip.html

---------------------------------------------------------------------------------------------------

Card Flip

We are now having all of the tools to start making 3D objects. Let's get started with the basics, flipping a card.

Here's the basic markup we ' ll need:

 <section class=  "container" > <div id= " Card "> <figure class=" front " >1</figure> <figure class= "back" >2</figure> </div> </SECTION>             

The would house the .container 3D space. The #card acts as a wrapper for the 3D object. Separate elements for both faces of the card, and .front .back . Even for such a simple object, I recommend using the this same the pattern for any 3D transform. Keeping the 3D space element and the object separate element establishes a paradigm that's simple to understand and Easie R to style.

We ' re ready for some 3D Stylin '. First, apply necessary perspective to the parent 3D space, along with any size or positioning styles.

 .container { Width: 200pxheight: 260pxposition: relativeperspective: 800px;}     

Now the #card element can is transformed in its parent ' s 3D space. We ' re using absolute/relative positioning so the 3D object was removed from the flow of the document. We ' ll also add @width: 100%;  and  height:100%;@. This ensures the object's would transform-origin occur in the center of container. More on transform-origin later.

Let's add a CSS3 transition so users can see the transform take effect.

  #card {width< Span class= "O" >: 100%height: 100%position: absolutetransform-style: preserve -3dtransition: transform 1s; } 

.containerthe ' s only perspective applies to direct descendant children #card . In order for subsequent children to inherit a parent's perspective, and live in the same 3D space, the parent can pass Alo ng its perspective with transform-style: preserve-3d . Without 3D transform-style , the faces of the card would is flattened with its parents and the back face ' s rotation would is nullifie D.

To position the faces in 3D space, we'll need to reset their positions in 2D with position: absolute . In order to hide the back-side of the faces when they is faced away from the viewer, we use backface-visibility: hidden .

  #card figure { margin: 0display: blockposition: absolutewidth: 100%height: 100%backface-visibility: hidden< Span class= "P";                /span>                

.backto flip the face, we add a basic 3D transform of rotateY( 180deg ) .

#card .front {  background: red;}#card .back { background: blue; transform: rotateY( 180deg );}

With the faces on place, the #card requires a corresponding style for when it's is flipped.

#card.flipped {  transform: rotateY( 180deg );}

Now we have a working 3D object. To flip the card, we can toggle the flipped class. When .flipped , the would #card rotate degrees, thus exposing the face .back .

See Example:card 1

Slide-flip

Take another look at the Weather App 3D transition. You'll notice that it's not quite the same effect as our previous demo. If you follow the right edge of the card, you'll find the IT stays flush with the container. Instead of pivoting from the horizontal center, it pivots on this right edge. But the transition isn't just a rotation–the edge moves horizontally from right to left. We can reproduce this transition just by modifying a couple lines of CSS in our original card flip demo.

The pivot point for the rotation occurs at the right side of the card. By default, the A element is at its transform-origin horizontal and vertical center ( 50% 50% or center center ). Let's change it to the right side:

#card { transform-origin: right center; }

That flip now needs some horizontal movement with translateX . We ll set the rotation to so -180deg it flips right side out.

#card.flipped {  transform: translateX( -100% ) rotateY( -180deg );}

See Example:card 2

Introduction to CSS 3D Transformations (3D transform)