Skip to content

Commit 4466f11

Browse files
committed
Add Change The Orientation Of An Image as a css til
1 parent d0bd260 commit 4466f11

File tree

2 files changed

+20
-1
lines changed

2 files changed

+20
-1
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
99

1010
For 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)
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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`.

0 commit comments

Comments
 (0)