One thing I've noticed while browsing vines with the vine finder is that sometimes folks will accidentally record sideways. With the css transform:rotate element, it is a simple matter to rotate the video itself as desired. All that's needed in this particular case is the ability to rotate it in 90-degree intervals, although it's actually possible to rotate it at an arbitrary angle.
The basic way to rotate an element by n degrees is by adding this to the css style for the element:
-moz-transform:rotate(ndeg); -webkit-transform:rotate(ndeg); -o-transform:rotate(ndeg); -ms-transform:rotate(ndeg); transform:rotate(ndeg);
The combination of the angle right next to the string "deg" seems a little odd, but that's what it is, and it works. There are a lot of other options for the transform: scaling, skewing, translating. A nice summary is at this mozilla developer page.
So now it is a simple matter to adjust for those videos shot sideways...or upside-down, I guess... Here's a vine of the Siberian Husky "Koda" demonstrating the feature:
(found with the vine finder) |