As we CSS and CSS3 allows us to make our web pages look more advanced, beautiful and interactive.
This post is about one of CSS3's advanced properties,
The first one, we gonna talk about is, ROTATE.
I don't there would be anyone, who don't the meaning of ROTATING, Is there?
Well! Either no or yes, we will explain.
Hmm... According to google translate, the ROTATE means, "move or cause to move something in a circle around an axis or center." e.g., A wheel rotates in a circle around its center.
I hope now its clear.
In CSS3, rotate means exactly same as in the above example.
Better see a demo, Just hove over the below box and see:
This post is about one of CSS3's advanced properties,
transform . This property can do a lot of things, like moving element from its current position, rotating, turning, skewing etc. I'll be sharing all of them one by one.The first one, we gonna talk about is, ROTATE.
I don't there would be anyone, who don't the meaning of ROTATING, Is there?
Well! Either no or yes, we will explain.
Hmm... According to google translate, the ROTATE means, "move or cause to move something in a circle around an axis or center." e.g., A wheel rotates in a circle around its center.
I hope now its clear.
In CSS3, rotate means exactly same as in the above example.
Better see a demo, Just hove over the below box and see:
This is a simple div element.
Well! How can be this helpful in our web pages?
We can use this feature in to our images. Hovering over some image and rotating it.
Hover over the image below:
I know, it's very cool effect.
I just used the following code in the above example:
.rotates img {
width: 80px;
height: 80px;
border: 6px solid white;
border-radius: 50px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
.rotates img:hover {
border-color: black;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
-webkit-, -moz-, -o-, -ms- are being used to overcome the Cross Browser Problems.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.