CSS Transforms open up a world of creative possibilities. In this video, learn how to rotate video and treat it in much the same way one would present a postcard.
- [Instructor] The CSS3 standard…not only opened up a lot of design possibilities…when it comes to working with video,…but the CSS transforms, included in the standard,…allow you to play with the video as well.…There's a lot you can do with them.…And if you want to learn more…about the CSS transforms and transitions,…you might want to check out…Patrick Kerry's course right here at Lynda.com,…which deals with this precise subject.…
In this example, right here,…we will play with one of them, by treating the video…as a sort of a postcard on a table top…and rotating the video element by 30 degrees.…So to get started, open the rotate.html file…found in your chapter download.…So I'm gonna pop over to my code editor,…which is brackets.…And,…as you saw,…we start with the video in its usual position…sitting there on the left.…
To rotate the video, what we're going to do…is to add a line under the margin property, right here…and enter,…transform colon…rotate bracket 30.…So let's take a look at what we got.…And that didn't work.…
Author
Tom Green
Released
10/12/2018- Key video formats used to publish on the web
- Encoding video that's optimized for online delivery
- HTML5 native video embedding and interaction
- Styling video components with CSS
- Captioning video
- Preparing video for social media
- Using Dynamic Link
Skill Level Beginner
Duration
Views
-
Introduction
-
Exercise files1m 11s
-
1. Web Video Formats
-
2. Encoding Video
-
The pipe3m 5s
-
Adobe Media Encoder overview3m 49s
-
Encoding an MP47m 57s
-
Miro Video Converter4m 33s
-
HandBrake4m 38s
-
Encoding from Adobe Premiere2m 58s
-
Fnordware2m 5s
-
-
3. HTML5 and Video
-
The video element2m 17s
-
The source attribute3m 26s
-
Autoplay3m 20s
-
Adding controls3m 49s
-
Alternate content sources3m 15s
-
Poster frame2m 23s
-
Resize video3m 45s
-
Looping video1m 34s
-
-
4. Video and CSS
-
Video in a box5m 47s
-
Applying opacity3m 41s
-
Text wrap4m 44s
-
Apply a gradient7m 44s
-
Rotate a video3m 18s
-
Animate a video7m 43s
-
-
5. Playing with Video
-
Background video: Premiere7m 11s
-
Background video code5m 42s
-
Captioning video8m 30s
-
Cinemagraph: Photoshop6m 54s
-
Animated GIF5m 39s
-
Third-party controllers7m 26s
-
Preparing for social media3m 58s
-
Using Dynamic Link5m 38s
-
Conclusion
-
Next steps1m 23s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Rotate a video