Blog Post: Rotate & Scale CSS

Red Deer & Blackfalds Web Design Writes:

As Web Development progresses it’s all about trying to come up with cool and interactive elements to include in a website, that doesn’t hinder UX (User Experience), and that can help to increase its professional appeal. The issue that arises is that as we progress with our websites we can start to overload our servers with so much “Functionality” that we really slow down our websites and their browser speed.

Basic Web Design tells us that as you hover over important elements on a website (especially links) they should change in appearance (in any one of a multitude of ways) so that the user can automatically assume that this is an element performs some type of task. Because CSS is loaded so quickly to a browser (when written properly) this is a fun and easy way to maximize your User Experience for :hover elements. As well, you can also apply some advanced CSS to static objects to give them a very custom look.

The following represent three ideas for you to use on your website for Scale and Rotation of objects using CSS:

Hover Scale

On hover, this element will increase in size and add a subtle DIV shadow to its outline, also acting as a:link.

HTML

<a href=”/”><img src=”http://redanchorwebdesign.com/wp-content/uploads/2014/11/article-picture.png” class=”scale-rotate-article” /></a>

CSS

img.scale-rotate-article {
width: 50%;
}

img.scale-rotate-article {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

img.scale-rotate-article:hover {
-moz-transform: scale(1.7);
-webkit-transform: scale(1.7);
-o-transform: scale(1.7);
-ms-transform: scale(1.7);
transform: scale(1.7);
cursor: pointer;
-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
}


Picture Rotation

This can be used for a:link elements, DIV, or just pictures as identified above

HTML

<img src=”http://redanchorwebdesign.com/wp-content/uploads/2014/11/article-picture.png” class=”scale-rotate-article-rotate” />

CSS

img.scale-rotate-article-rotate {
width: 40%;
margin: 12px;
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}


Scale and Picture Rotation

This is a picture example, with a transition hover to rotate the object 360 degrees and scale it 1.5 times.

HTML

<img src=”http://redanchorwebdesign.com/wp-content/uploads/2014/11/article-picture.png” class=”scale-rotate-article-rotate-both” />

CSS

img.scale-rotate-article-both {
width: 40%;
}

img.scale-rotate-article-both {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}

img.scale-rotate-article-both:hover {
-moz-transform: scale(1.5) rotate(360deg);
-webkit-transform: scale(1.5) rotate(360deg);
-o-transform: scale(1.5) rotate(360deg);
-ms-transform: scale(1.5) rotate(360deg);
transform: scale(1.5) rotate(360deg);
}

Note: You can use both positive and negative rotations on an image or DIV element to have it twist and turn a multitude of ways (or a differing number of times) based on the number of degrees and the (+/-) value of the CSS

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)