Rotating Elements4:37 with Guil Hernandez
The rotate() transform function rotates an element from 0 to 360 degrees clockwise or counterclockwise.
rotate()accepts arguments in various types of angle units.
- The most common unit developers use for rotations is
- A positive value rotates an element clockwise, while a negative value rotates an element counterclockwise.
- Rotations––and all transforms––do not affect the position of nearby elements.
- You may see parts of elements appear on top of other content, but the new positions created by the rotation does not affect surrounding content.
[MUSIC] 0:00 CSS transforms give us different ways to size, 0:05 position, and change the appearance of HTML elements. 0:08 With transforms we can visually manipulate content by rotating, scaling, skewing, 0:12 and moving elements in two-dimensional or even three-dimensional space. 0:17 All CSS transformations happen via a single property, the transform property. 0:22 So any transform you want on your page needs to be written as a value 0:28 of the transform property using one or several transform functions. 0:33 So, this page lists all of the transformation functions 0:37 the transform property accepts. 0:41 As you can see there are many types of css transforms, 0:43 each performing a different visual effect. 0:47 So, in this section I'm going to cover 2-d transform functions that 0:50 transform elements on the x and y access like rotate, 0:55 scale, skew, and translate. 1:00 With these transform functions we can add pretty neat visual enhancements to 1:03 our photo gallery like the effects you're seeing here. 1:08 And in later videos you'll learn about other functions that simulate 1:13 three dimensional effects. 1:17 You can follow along using the latest workspace by launching the workspace on 1:19 this page, or download the file to follow along with your own text editor. 1:23 So in this section we're going to be working with nine images 1:27 in our photo gallery, and as you can see here in the wide view port range, 1:31 the images split up into three rows. 1:36 So first, I want to add a small rotation to my images. 1:40 To do this, I can use the rotate function. 1:44 I'll open up the file interactions.css and 1:49 scroll down to the image transforms and transitions section. 1:53 And right below the comment for row one I'll create a rule that targets 1:57 my images, then add the transform property 2:03 and as its value I'm going to define the rotate function. 2:09 So rotate is a 2-D function you can use to rotate an element 2:16 from zero to 360 degrees, clockwise or counter-clockwise. 2:21 And inside the parentheses, 2:26 the rotate function accepts arguments in various types of angle units. 2:29 Such as degrees, gradients, radians, and turns but 2:34 the most common unit developers use for rotations is the degree unit. 2:39 The degree unit moves an element in a circular motion up to 360 degrees. 2:45 So, for example, if I use a value of 25 degrees or 2:51 Deg, once we refresh the browser notice how the value 25 degrees 2:57 rotates an image clockwise 25 degrees from its center position. 3:03 Now if I go back and change the value to let's say 90 degrees, 3:10 this rotates an image 90 degrees and 3:16 a value 180 degrees is half a rotation. 3:20 So the image is turned upside down and 360 degrees is one complete rotation. 3:25 Now to rotate my images counterclockwise, or in the opposite direction, 3:36 I can use a negative value. 3:41 So, for example, the value -45 degrees 3:43 rotates the images counterclockwise 45 degrees. 3:47 And -90 degrees will rotate it counterclockwise by 90 degrees and so on. 3:53 You'll notice how the rotations do not affect 3:59 the position of other adjacent elements. 4:02 That's because CSS transforms do not affect the normal document float. 4:05 That is the normal way elements will display as they're written in the HTML. 4:10 So anytime you apply a transformation to an element the original 4:15 space occupied by that element is preserved by the browser. 4:19 Now, you may see elements appear on top of other content, like you're seeing here. 4:23 But the new positions created by the rotation 4:29 doesn't actually affect the surrounding content. 4:33
You need to sign up for Treehouse in order to download course files.Sign up