diff --git a/README.md b/README.md index 386eef6..8bf5651 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud). -_880 TILs and counting..._ +_881 TILs and counting..._ --- @@ -96,6 +96,7 @@ _880 TILs and counting..._ - [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md) - [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md) - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md) +- [Change The Orientation Of An Image](css/change-the-orientation-of-an-image.md) - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md) - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md) - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md) diff --git a/css/change-the-orientation-of-an-image.md b/css/change-the-orientation-of-an-image.md new file mode 100644 index 0000000..cc6df7d --- /dev/null +++ b/css/change-the-orientation-of-an-image.md @@ -0,0 +1,18 @@ +# Change The Orientation Of An Image + +A single-line CSS transform is all it takes to change the orientation of an +image (or any DOM element, really). + +For instance, if I have an image that is _on its side_, I can use the following +[`rotate` +transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate) +to orient it correctly. + +```css +img { + transform: rotate(90deg); +} +``` + +It takes an angle which can be specified in degrees. Here I use `90deg`. If I +was going for a different effect, I could do something like `45deg`.