Frontend Forever

Rotating Images Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Rotating Images Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

HTML and CSS image rotation techniques

A CSS rotate class, which is appended to any tag to rotate the image, can be used to rotate an image on a web page.

CSS rotation of an image

For the image to be rotated in all popular Internet browsers, the CSS code must include a transformation code for each.
Here is some CSS code that will rotate a picture 180 degrees.

The following transformations are applied to the image:

.rotatingimage180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

Change the "180" in the CSS code and the element to the desired degree to rotate an image by a different number of degrees.

Syntax

The amount of rotation created by rotate() is specified by an . If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.

div {

  transform: rotate(a);

}

Values

Is an representing the angle of the rotation. The direction of rotation depends on the writing direction. In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context, a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one.

If you need to know more about the transform rotate property i suggest you to read this official post from mozilla. Read More

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: linear-gradient(90deg,blue,skyblue,blue);
}
img{
	width: 320px;
	height: 200px;
	position: absolute;
}
.container{
	width: 350px;
	height: 200px;
	position: relative;
	margin-top: 15%;
	margin-left: 40%;
	perspective: 1000px;
	transform-style: preserve-3d;
	transform: rotateX(-10deg) rotateZ(-10deg);
	animation: ror 20s linear infinite;
}
@keyframes ror{
	50%{
		transform: rotateX(30deg);
	}
	80%{
		transform: rotateX(-30deg);
	}
}
.images{
	width: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: rotate 20s linear infinite;
}
@keyframes rotate{
	from{

}
	to{
		transform: rotateY(360deg);
	}
}
img:nth-child(1){
	transform: rotateY(60deg) translateZ(300px);
}
img:nth-child(2){
	transform: rotateY(120deg) translateZ(300px);
}
img:nth-child(3){
	transform: rotateY(180deg) translateZ(300px);
}
img:nth-child(4){
	transform: rotateY(240deg) translateZ(300px);
}
img:nth-child(5){
	transform: rotateY(300deg) translateZ(300px);
}
img:nth-child(6){
	transform: rotateY(360deg) translateZ(300px);
}
img:hover{
	width: 340px;
	height: 220px;
	cursor: pointer;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Rotating Images Animation

About this Code

CSS rotation of an image

Syntax

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever