Topic 12: Designing, Defining, and Triggering CSS3 Transforms without Custom Libraries (Thought Library)
CSS3 Transforms
Transform is an attribute in CSS3 that can be used to transform an HTML element. There are several different ways to transform the object including scale(), translate(), rotate(), skew(), and matrix(). This changes the appearance of the element when viewed in a browser. The tranforms can be triggered with JavaScript.
.className {
transform: scale(x,y);
}
3d transforms
Each kind of transform can be done in 3 different directions, x, y, and z. X transforms manipulate the element along the x-axis or a horizontal line in the center of the element. Y transforms manipulate along the y-axis or a vertical line. Z transforms along the z-axis, or a line going from the screen to the user.
The z-axis creates 3d effects which can only be seen if you add a couple of attributes.
- Add perspective: 1000px; to the parent element. This sets the depth between the screen and user. (You can use a different measurement than 1000px and it will change the depth.)
- Add transform-style: preserve-3d; to the element being transformed. This maintains the shape of the element during the transform.
.parentClassName {
perspective: 1000px;
}
.className {
transform: scale3d(5,2,6);
transform-style: preserve-3d;
}
Scale
scale() affects the size of an object. The object can be made smaller by entering a decimal number into the parenthesis, or larger by adding a number greater than 1. If one value is entered, the element will be scaled proportionally. If 2 values are entered, the first (x) affects the width of the element and the second (y) affects the height. A third value can be entered (z) and it will affect the depth of a 3D object. In order to get the 3D effects to show, add a perspective attribute to the parent element. For instance, on all of my examples, the parent divs have perspective: 1000px;
transform: scale(5); // scale equally
transform: scaleX(2); // scale horizontally
transform: scaleY(.8); // scale vertically
transform: scaleZ(3); // scale depth
transform: scale(3,1.5); // scale 2D
transform: scale3d(2,1,5); // scale 3D
Click on the shapes to see different examples of scale
Translate
translate() moves an element from its original position. There are several different ways to use translate including translate(5px), translate(5px, 40px), translateX(-30px), translateY(50px), translateZ(20px), and translate3d(5px, 4px, 3px). The X, Y, Z, and 3d are similar to the scale. Negative numbers move the opposite way, on x it moves to the right, and on y it moves up.
transform: translateX(2px); // move horizontally
transform: translateY(-10px); // move vertically
transform: translateZ(30px); // move depth
transform: translate(40px, 50px); // move both directions
transform: translate3d(20px,10px,5px); // move 3D
Click on the shapes to see different examples of translate. Notice that children also are translated. Also, notice that translateZ brings the element closer or farther from the user, which makes it appear larger or smaller.
Rotate
Rotate is similar to translate, except it rotates the object. There are several options for rotate.
rotate(50deg) //rotates the shape clockwise.
rotateX(30deg) //Tilts the left edge toward and right edge away from the user.
rotateY(40deg) //tilts the top edge toward and bottom edge away from the user.
rotateZ(180deg) //rotates clockwise.
rotate3d(30deg, 40deg, 50deg) //rotates on the x, y, and z axis at the same time.
Notice that measurements can be written in degrees (deg), radians (rad), percentages (50%) or fraction of a turn (0.3turn). Negative numbers rotate the opposite direction. Here is the code for the rotateZ animation below.
@keyframes rotate3 {
0% {transform: rotateZ(0);}
25% {transform: rotateZ(90deg);}
50% {transform: rotateZ(180deg);}
75% {transform: rotateZ(270deg);}
100% {transform: rotateZ(360deg);}
}
Skew
Skew distorts the shape, for instance, making a square appear to be a parallelogram. Skew has 3 different options, skew(x,y) which changes both the x and y axis at once, skewX(50deg) which skews along the x-axis, and skewY(30deg) which skews along the y axis. Skew measurements are entered in degrees.
transform: skew(30deg, 10deg);
transform: skewX(-30deg);
transform: skewY(10deg);
Multiple Transforms On One Element
There are two ways to perform multiple transforms on the same element. You can use multiple values in the transform attribute or you can use matrix.
Multiple Values
To add multiple transforms, in CSS, inside the transform attribute, add a list of transforms to be performed.
transform: rotateZ(180deg) translateX(30px) scale(2, .75);
translateX
scale
Matrix
Matrix is a combination of all of the other transforms. The syntax is:
transform: matrix(scale, skewY, skewX, scaleY, translateX, translateY);
transform: matrix(1, 3, 3, 2, 100, 50); // example
Thought Library
Flash Cards
These flashcards use transform: rotateX() to flip the cards vertically. The flip is triggered by mouseover and mouseout events.
Transformation Flashcards
Move your mouse over the card to see the answer. If you got it right, click the card to mark correct. Otherwise, move your mouse away from the card and try again.
What would you use to turn an element upside down, without reversing the text?
transform: rotateZ(180deg);
or
transform: rotate(.5turn);
What would you use to move an element to the left 300 pixels and down 50 pixels?
transform: translate(-300px, 50px);
What would you use to make an element twice as big and rotate it to the right 10 degrees?
transform: scale(2) rotate(10deg);
Slideshow
Here is the same slideshow from topic 11, but I have used some new transforms to add interest to the slide change.
.slideshow {perspective: 1000px;}
.slide {
transform-style: preserve-3d;
transform: rotateX(0deg) scale(0);
}
.activeImg2 {
transform: rotateX(1440deg) scale(1);
}
.text2 {
transform: rotateX(-180deg);
color: transparent;
transition: all 1s 1s cubic-bezier(.75,-0.5,0,1.75);
}
.activeImg2 .text2 {
transform: rotateX(0deg);
color: white;
}