Basic 3D Transform Methods
++ CSS 3D transforms allow us to rotate, skew, squash, and stretch + HTML 5 elements. While this wouldn’t be the most efficient way to + 3D model, it is an exciting way to add another level of + interactivity to your websites. Adding a third axis to a website + creates a sense of depth and allows us to move elements towards + and away from the user. The z-axis is measured in positive and + negative values. +
+ +Matrix 3D
++ matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, + b4, c4, d4 ) +
+A transform method using a 4 x 4 matrix of 16 values.
+Translate 3D
+translate3d:(x,y,z);
+Defines a 3D translation.
+translateX(x)
++ Defines a 3D translation, using only the value for the X-axis +
+translateY(y)
++ Defines a 3D translation, using only the value for the Y-axis +
+translateZ(z)
++ Defines a 3D translation, using only the value for the Z-axis +
+Scale 3D
+(x,y,z)
+Defines a 3D scale transformation
+scaleX(x)
++ Defines a 3D scale transformation by giving a value for the + X-axis +
+scaleY(y)
++ Defines a 3D scale transformation by giving a value for the + Y-axis +
+scaleZ(z)
++ Defines a 3D scale transformation by giving a value for the + Z-axis +
+Rotate 3D
+rotate3d(x,y,z,angle)
+Defines a 3D rotation
+rotateX(angle)
+Defines a 3D rotation along the X-axis
+rotateY(angle)
+Defines a 3D rotation along the Y-axis
+rotateZ(angle)
+Defines a 3D rotation along the Z-axis
+Skew
+skew(x-angle,y-angle)
++ Defines a 2D skew transformation along the X- and the Y-axis +
+skewX(angle)
+Defines a 2D skew transformation along the X-axis
+skewY(angle)
+Defines a 2D skew transformation along the Y-axis
+Perspective
+perspective(n)
+Defines a perspective view for a 3D transformed element
++ If the value is 0 or a negative number, no perspective transform + is applied. +
++
CSS Card Flip
++ Now that we've covered some ways to use CSS 3D transforms, let's + practice them and create a simple card flip using HTML, CSS, and + JavaScript. For this demonstration we will be using the rotateY() + and perspective property. +
+Click Me
+
+ Front
+Back
+HTML
++ First, we are going to create a div with a class of container to + hold our card. Next, we will add another div with the class of + card. Inside of div class=”card” we must add two more divs which + will allow us to style the front and back of the card as well as + keep the positions of each side in line. +
+
+ CSS
++ Let’s start by setting up the container, first we will need to set + the width, height, and margin. It is important to add the + perspective property to create a 3D space for our transforms to + occur. The perspective of the container will only affect the + content inside of it. +
+
+ + After the perspective has been set, we will place our card in 3D + space. By setting the width and height to 100% we have set the + card’s transform-origin to the center of the container. Next we + will set the position, and transition period of our card + animation. The transform-style: preserve-3d; property ensures that + the children of the card element are positioned in 3D space. Below + we will add the card class a second time and add the is-flipped. + Use the property transform: rotateY(180deg) to turn the card over + and expose the backside. +
+
+ + Finally, we can start to style the faces of our card. To align the + faces in 3D space, use the card-face class and set the position to + absolute. Again set the width and height to 100% so each face + fills the card class. Be sure to add the backface-visibility + property to this class to hide the back of our card element. From + here you can use the classes front and back to further customize + the contents of each face. +
+
+ JavaScript
++ Finally, we can start to style the faces of our card. To align the + faces in 3D space, use the card-face class and set the position to + absolute. Again set the width and height to 100% so each face + fills the card class. Be sure to add the backface-visibility + property to this class to hide the back of our card element. From + here you can use the classes front and back to further customize + the contents of each face. +
+
+