Rotate, skew, scale, fade effects with CSS 3, jQuery and Bootstrap

Adding cool CSS 3 effects in different elements

To make a website more interactive, you may use the power of CSS to display different elements on a web page with animations like rotate or other effects.

For example, if you have an e-commerce website, then a section of products can be displayed with a fading effect as a user scrolls down to that section and uses a rotate effect as scrolling to special offers etc.

In this article, I am going to share a light-weight jQuery plug-in that uses CSS 3 effects for creating such animation in web page elements. Have a look at the following section for live demos and setting up guide with code for using this cool plug-in.

A demo of adding rotate effect as you scroll down

In this demo, the rotate effect is added as you scroll down the page. In the markup section, the Bootstrap CSS is used for the demo. You may use it with non-Bootstrap-based projects as well.

In the demo page, scroll down to bring the block of elements in view and those will display with a rotating effect:

bootstrap css effect

See online demo and code

The markup for creating the rotating animation using CSS3 and jQuery:

  <div class="container">

    <h3>Scroll down</h3>

  </div>

  <div class="container">

    <h2>A demo of rotating elements</h2>

    <div class="row">

      <div class="col-md-4"><div class="content-box" data-move-x="-500px" data-rotate="90deg"></div></div>

      <div class="col-md-4"><div class="content-box" data-move-y="200px" data-move-x="-200px" data-rotate="45deg"></div></div>

      <div class="col-md-4"><div class="content-box" data-move-x="500px" data-rotate="-90deg"></div></div>

    </div>

 

  </div>

 

You only need a line of jQuery after including the library and plug-in JS files. In the markup section, use the data-move-y and data-move-x data attributes for specifying the angle.

Get the complete code from the demo page.

A demo with fading effect

In this demo, the content boxes are displayed with the fading effect as you scroll down to that area.

bootstrap css fading effect

The code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
    html, body, .banner, .container {
        height:100%;
        text-align: center;
    }
    .content-box {
        height:250px;
        background: #408080;
        
    }
    </style>

</head>
<body>     
  <div class="container">
    <h3>Scroll down</h3>
  </div>
  <div class="container">
    <h2>A demo of fading elements</h2>
    <div class="row">
      <div class="col-md-6"><div class="content-box"></div></div>
      <div class="col-md-6"><div class="content-box"></div></div>
    </div>
   
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/smoove/jquery.smoove.js"></script>
    <script>$('.content-box').smoove({offset:'50%'});</script>


</body>
</html>

You may find the complete code of this demo in the demo page’s code section.

The demo of moving elements across the screen

In this demo, the block of “content” that actually can be product listings, service box or images are moved across the screen by using different values for data-move-y and data-move-x data attributes:

css3 effect across screen

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
    html, body, .banner, .container {
        height:100%;
        text-align: center;
    }
    .content-box {
        height:250px;
        background: #804040;
        box-shadow: 10px 10px 15px #92A5DE;
        
    }
    </style>

</head>
<body>     
  <div class="container">
    <h3>Scroll down</h3>
  </div>
  <div class="container">
    <h2>A demo of moving objects across screen</h2>
    <div class="row">
      <div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="-200px"></div></div>
      <div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="-100px"></div></div>
      <div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="100px"></div></div>
      <div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="200px"></div></div>
    </div>
   
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/smoove/jquery.smoove.js"></script>
    <script>$('.content-box').smoove({offset:'50%'});</script>


</body>
</html>

A demo of 3D effect for displayed elements

You may also move the objects with 3D effects by using this plug-in. For this, the three data attributes are used with the following values in the demo:

data-rotate-x=”90deg”, data-move-z=”-500px” and data-move-y=”200px”

bootstrap effect 3d

See online demo and code

The CSS used for this demo:

    .content-box {

        height:250px;

        background: #0000A0;

        box-shadow: 15px 20px 25px #A7A7A7;

 

    }

The markup:

  <div class="container">

    <h3>Scroll down</h3>

  </div>

  <div class="container">

    <h2>A demo of moving 3D effect</h2>

    <div class="row">

      <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>

      <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>

      <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div>

    </div>

 

  </div>

 

A demo of scaling and skewing elements

In this demo, the objects are scaled and skewed by using the data-scale and data-skew attributes. Along with this, the offset property in the jQuery code also plays its role. Have a look:

bootstrap scale skew

The code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
    html, body, .banner, .container {
        height:100%;
        text-align: center;
    }
    .content-box {
        height:250px;
        background: #0000A0;
        box-shadow: 15px 20px 25px #A7A7A7;
        
    }
    </style>

</head>
<body>     
  <div class="container">
    <h3>Scroll down</h3>
  </div>
  <div class="container">
    <h2>A demo of moving 3D effect</h2>
    <div class="row">
      <div class="col-md-6"><div class="content-box" data-scale="5" ></div></div>
      <div class="col-md-6"><div class="content-box" data-scale="0.2" data-skew="90deg,90deg"></div></div>
    </div>
   
  </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/smoove/jquery.smoove.js"></script>
    <script>$('.content-box').smoove({offset:'30%'});</script>


</body>
</html>

A demo of rotating images

In this demo, rather than using just a block of CSS, I have used images for rotation. Yet again, the images are used inside the Bootstrap classes. For implementing that, I simply used the img src tag of HTML inside the div where data attributes for rotating the elements are used:

css rotate images

See online demo and code

Get the complete code by clicking the above image or demo link.

Credit: abeMedia

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️