File tree Expand file tree Collapse file tree 2 files changed +20
-1
lines changed Expand file tree Collapse file tree 2 files changed +20
-1
lines changed Original file line number Diff line number Diff line change @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
99
1010For a steady stream of TILs, [ sign up for my newsletter] ( https://tinyletter.com/jbranchaud ) .
1111
12- _ 880 TILs and counting..._
12+ _ 881 TILs and counting..._
1313
1414---
1515
@@ -96,6 +96,7 @@ _880 TILs and counting..._
9696- [ Animate Smoothly Between Two Background Colors] ( css/animate-smoothly-between-two-background-colors.md )
9797- [ Apply Multiple Box Shadows To Single Element] ( css/apply-multiple-box-shadows-to-single-element.md )
9898- [ Apply Styles To The Last Child Of A Specific Type] ( css/apply-styles-to-the-last-child-of-a-specific-type.md )
99+ - [ Change The Orientation Of An Image] ( css/change-the-orientation-of-an-image.md )
99100- [ Circular Icons With A Massive Border Radius] ( css/circular-icons-with-a-massive-border-radius.md )
100101- [ Create A Pulsing Background With CSS Animation] ( css/create-a-pulsing-background-with-css-animation.md )
101102- [ Dry Up SCSS With Mixins] ( css/dry-up-scss-with-mixins.md )
Original file line number Diff line number Diff line change 1+ # Change The Orientation Of An Image
2+
3+ A single-line CSS transform is all it takes to change the orientation of an
4+ image (or any DOM element, really).
5+
6+ For instance, if I have an image that is _ on its side_ , I can use the following
7+ [ ` rotate `
8+ transform] ( https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate )
9+ to orient it correctly.
10+
11+ ``` css
12+ img {
13+ transform : rotate (90deg );
14+ }
15+ ```
16+
17+ It takes an angle which can be specified in degrees. Here I use ` 90deg ` . If I
18+ was going for a different effect, I could do something like ` 45deg ` .
You can’t perform that action at this time.
0 commit comments