Create 360 Degree Rotation Effect On-hover Using CSS - Images

And here is another feature many believe is impossible on Blogspot blogs; images 360deg rotation on-hover or on-click effect, whereas, using CSS and HTML; you can create images that rotates round through 360deg on hover or click.

How to Create Images with 360 Degree Rotation Effect On-hover On Blogspot Blog

Many bloggers decide to abandon their blogspot blog for WordPress or other CMS which are believed to have more features and are more friendly to work with. Of course, most of these alternatives are by far easier and friendly to work with than on Blogspot, Blogspot on the other hand is not that bad anyways.


However, what majority do not know is; only few of the many features that attracts you to other CMS cannot be accomplished on Blogspot. Talk of the Cart features that make selling and accepting payments on your blog easy, custom landing pages that converts sales among others.


Here is How to Install Complete Cart system on Blogspot Blog and here is how to Create Perfect Custom Landing Page for Blogspot Blog. We even let you request for any features or widget you want available on your Blogspot blog here.


And here is another feature many believe is impossible on Blogspot blogs; images 360deg rotation on-hover or on-click effect, whereas, using CSS and HTML; you can create images that rotates round through 360deg on click.


To Create 360 Degree Rotation On-hover Effect for Images On Blogger Blog

  1. Login your Blogger account, then go to Theme. From the screen that appears, click Edit HTML. NOTE: make a full backup of your blogger blog template before you proceed. Here is how to make a full backup of your blogger blog theme/template
  2. Step 1 - How to Create Images with 360 Degree 3D Rotation Effect On-hover On Blogspot Blog Step 1b - How to Create Images with 360 Degree 3D Rotation Effect On-hover On Blogspot Blog
  3. Click anywhere inside the code area and press the CTRL + F keys on your keyboard. This will open the search box that enables you search from within the code area only.
  4. Step 2 - How to Create Images with 360 Degree 3D Rotation Effect On-hover On Blogspot Blog
  5. From the step 2 above, search for this code:
    </b:skin>
    
    Just above the code, paste the codes below:
    .gallery4-h2 {
     font-size: 1.125em;
     color: #4a89ca;
     font-weight: 600;
     margin: 0;
    }
    
    .gallery4-h3 {
     font-size: 1.3em;
     line-height: 1.25em;
     margin-top: .85em;
     margin-bottom: .5em;
    }
    
    .gallery4-p {
     font-size: .875em;
     line-height: 1.4;
     margin: 0 0 1.5em;
    }
    
    .gallery4-container,
    .gallery4-content {
     margin: auto;
    }
    
    .gallery4-container {
     width: 94.02985075%;
     max-width: 1260px;
     padding: 0 2.25em 4em;
     background: #fff;
    }
    
    .gallery4-main-header {
     text-align: center;
     padding: 2.8em 0 3.8em;
    }
    
    .gallery4-cube-container {
     max-width: auto;
     text-align: center;
     margin: 0 auto 4.5em;
    }
    
    .gallery4-name {
     font-size: 1.65em;
     font-weight: 800;
     margin: 0 0 1.5em;
     line-height: 1;
    }
    
    .gallery4-name span {
     font-weight: 300;
     margin-left: -7px;
    }
    
    .gallery4-button {
     font-size: .8em;
     color: #fff;
     width: 90%;
     line-height: 1.15;
     font-weight: 700;
     display: block;
     text-decoration: none;
     text-transform: uppercase;
     padding: .95em 0;
     border-radius: .5em;
     background: rgba(74,137,202, .8);
     margin: auto;
    }
    
    .gallery4-photo-desc {
     font-size: .85em;
     color: #fff;
     padding: 1.1em 1em 0;
     background: #345d88;
    }
    
    .gallery4-clearfix::after {
     content: " ";
     display: table;
     clear: both;
    }
    
    .gallery4-button {
     transition: background .3s;
    }
    
    .gallery4-button:hover {
     background: rgba(74,137,202, 1);
    }
    
    .gallery4-cube-container {
     box-shadow: 0 18px 40px 5px rgba(0,0,0,.4);
      perspective: 800px;
    }
    
    .gallery4-photo-cube {
    display: inline-block;
    transition: transform 8s ease-in-out; 
    width: 280px;
    height: 430px;
    transform-style: preserve-3d;
    }
    
    .gallery4-photo-cube:hover {
    transform: rotateY(-270deg);
    }
    
    .gallery4-front,
    .gallery4-back,
    .gallery4-left,
    .gallery4-right {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    }
    
    .gallery4-front {
    transform: translate3d(0,0,110px);
    }
    
    .gallery4-back {
    transform: translateZ(-110px) rotateY(270deg);
      transform-origin: center left;
    }
    
    .gallery4-left {
    transform: rotateY(-270deg) translate3d(110px, 0, 0);
      transform-origin: top right;
    }
    
    .gallery4-right {
    transform: translateZ(-110px) rotateY(180deg);
     }
    
    
  6. Now, click Save theme. This will save the css code you just added from above on to your blog's theme.
  7. To make any set of images on your blog posts or pages have 360deg rotation effect on-hover or on-click, simply copy and paste the HTML code from below onto the page:
  8. To do that, go to posts then create new post. On the post edit screen, click HTML tab.
  9. Now, paste the code from below onto anywhere you want the image appear on the page.
  10. <div class="gallery4-cube-container">
        <div class="gallery4-photo-cube">
    
         <img class="gallery4-front" src="image-1-link" alt="">
         <img class="gallery4-back" src="image-2-link" alt="">
         <img class="gallery4-left" src="image-3-link" alt="">
         <img class="gallery4-right" src="image-4-link" alt="">
    
        </div>
       </div> 
    
    

To Modify the 360 Degree Rotating Images: Images, Size, Speed etc

  1. To insert your preferred set of images to be rotated, replace the text in red to your preferred images link in the HTML code above. NOTE: Your images must be uploaded on an open server such as blogger or postimages.
  2. To alter the size of the images from say; width: 230px to width: 200px and height: 480px to height: 300px, change the values in blue from the CSS code above here to your preferred values.
  3. To alter the speed of the rotation, change the value in green from say; 8s to 4s.

Video Tutorial: How to Create Images with 360 Degree Rotation Effect On-hover On Blogspot Blog


You still do not get how it is done?

Let us know how we can help you in your comment. You can also suggest how we can improve the tutorial in the comment.

0 Comments

share this | subscribe