Learn basic CSS transition and animation by imitating smashing magazine

2 min readApr 29, 2019

Without publicity, the smashing magazine (www.smashingmagazine.com) has cool front-end implementations, designers can learn from. Today we’ll learn how to rotate and animate an image like it’s done on this website (picture below):

Basically, there’re 03 things to retain to know and use CSS transitions

1 — the property that needs transition (transition-property)
2 — the transition time (transition-duration)
3 — the transition timing function (the manner/speed with which the transition happens (transition-timing-function)

For the above image, 02 properties are going to be transitioned : rotation angle and the shadow.

The HTML code for the above image is below :

<div class="design-system">
             
                <img class="ruban-img"                      src="https://res.cloudinary.com/indysigner/image/upload/v1542959380/shop/design-systems-hardcover-book.png" alt="t" /></div>

You can use the image of your choice, but i decided to get the url of our smashing magazine image directly.

In order to get the image tilted backwards as it’s shown, we shall rotate the image to -11 degrees, then we shall add a shadow to the image.

Check the css property below:

.design-system img {
            
            transform-origin: 0 100%;
            transform: rotate(-11deg); 
            box-shadow: -12px 42px 14px -24px rgba(0, 0, 0, 0.75);            /* 03 basic transition properties to consider below */            transition-property: transform, box-shadow;
            transition-duration: 0.3s;
            transition-timing-function: linear;
 }

transform-origin specifies where transition will originate (read more about “transform-origin” here : https://alligator.io/css/transform-origin-property/
transition-property above specifies which property (comma-separated, if many) will transition;
transition-duration specifies the time in seconds;
transition-timing-function specifies the speed, we just used the normal/linear method.
(read more about transitions here : https://learn.shayhowe.com/advanced-html-css/transitions-animations/ )
box-shadow : gives a shadow to the image. I used a box-shadow generator that you can check out here : https://www.cssmatic.com/box-shadow

Only thing remaining now is the CSS property when we have a mouse hover the image :

.design-system img:hover {
            transform: rotate(0deg);
            box-shadow: -5px -17px 0px -24px rgba(0, 0, 0, 0);
 }

As you can notice, the image rotates back to resting position ( 0 degrees) and i generated a shadow that hides behind the image, hence making it invisible to the browser (still using my box-shadow generator):

Complete code in one page of all we have done below :

<html>
  <head>
    <style type="text/css">
        .design-system img {
            
            transform-origin: 0 100%;
            transform: rotate(-11deg);
            box-shadow: -12px 42px 14px -24px rgba(0, 0, 0, 0.75);            transition-property: transform, box-shadow;
            transition-duration: 0.3s;
            transition-timing-function: linear;
        }        .design-system img:hover {
            transform: rotate(0deg);
            box-shadow: -5px -17px 0px -24px rgba(0, 0, 0, 0);
        }
    </style>
  </head>  <body>
        
            <div class="design-system">
                <h2>Design Systems</h2>
                                
                <img class="ruban-img" src="https://res.cloudinary.com/indysigner/image/upload/v1542959380/shop/design-systems-hardcover-book.png " alt="t" />
            </div>
  
  </body>
  </html>

Learn basic CSS transition and animation by imitating smashing magazine

Written by SHEY Louis CHIA