Learn how some of CSS’s new features let you move images, rotate them, and put them in a nonrectangular “frame.”
- [Instructor] You can use CSS to enhance your images…with special effects.…You may need to tweak the image you have…in order to match the style of the webpage you're creating.…Let me show you a few of these effects.…This webpage has three images of eagle-themed art.…I'd like to make these images a bit more interesting.…Let's do this by adding a style attribute…with the transform CSS property…to rotate the images on the ends.…The property value is rotate with a number of degrees…in parentheses.…A negative rotation is counter-clockwise…and a positive rotation is clockwise.…
Other units you can use besides degrees are rad…for radians and turn for a fractional…or whole complete rotation.…I'm going to rotate the image on lines 25 and 26,…20 degrees counter-clockwise by adding the style…to transform with a rotation of negative 20 degrees.…The image on the right will have a style…that gives a transform to rotate 20 degrees clockwise.…
I'll save that, go into the browser, and refresh,…and now the images are rotated around their center point.…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.