rotateX() 3D

The rotateX() method rotates an element around its X-axis at a given degree:

		
			<style>
				div {transform: rotateX(150deg);
					}
			</style>

TDB
School

Rotating a <div> block from 0deg to 360deg in x-direction.

		
			<style>
				.tdb-transform{
				height:80px;width:80px;background-color:black;
				text-align:center;padding-top:50px;
				color:white;margin:auto;}
					.x1:hover{animation:x1 5s}
					@keyframes x1{from{
					transform:rotateX(0deg);
					}to{transform: rotateX(360deg);
					}}
				</style>
		<body>
		<p class="tdb-transform x1">TDB<br>School</p><br>
		</body>

Try it Yourself

rotateY() 3D

The rotateY() method rotates an element around its Y-axis at a given degree:

					
						<style>
							div {transform: rotateY(130deg);
								}
						</style>

TDB
School

Rotating a <div> block from 0deg to 360deg in y-direction.

					
						<style>
				.tdb-transform{
				height:80px;width:80px;background-color:black;
				text-align:center;padding-top:50px;
				color:white;margin:auto;}
					.y1:hover{animation:y1 5s}
					@keyframes y1{from{
					transform:rotateY(0deg);
					}to{transform: rotateY(360deg);
					}}
				</style>
		<body>
		<p class="tdb-transform y1">TDB<br>School</p><br>
		</body>

Try it Yourself

rotateZ() Method 3D

The rotateZ() method rotates an element around its Z-axis at a given degree:

			
				<style>
					div {
						transform: rotateZ(90deg);
					}
				</style>

TDB
School

Rotating a <div> block from 0deg to 360deg in z-direction.

	
			<style>
				.tdb-transform{
				height:80px;width:80px;background-color:black;
				text-align:center;padding-top:50px;
				color:white;margin:auto;}
					.z1:hover{animation:z1 5s}
					@keyframes z1{from{
					transform:rotateZ(0deg);
					}to{transform: rotateZ(360deg);
					}}
				</style>
		<body>
		<p class="tdb-transform z1">TDB<br>School</p><br>
		</body>

Try it Yourself

		
			<!DOCTYPE html>
		<html>
			<head>
			<style>
			.tdb-transform{
				height:80px;width:80px;background-color:black;
				text-align:center;padding-top:50px;color:white;margin:auto;
			}
				.x1:hover{animation:x1 5s}
				.y1:hover{animation:y1 5s}
				.z1:hover{animation:z1 5s}

				@keyframes x1{from{
					transform:rotateX(0deg);
				}to{transform: rotateX(360deg);
				}}
				@keyframes y1{from{
					transform:rotateY(0deg);
				}to{transform: rotateY(360deg);
				}}
				@keyframes z1{from{
					transform:rotateZ(0deg);
				}to{transform: rotateZ(360deg);
				}}
			
				</style>
			</head>
		<body>
		<!--x-direction-->
		<p class="tdb-transform x1">TDB<br>School</p><br>
		<!--y-direction-->
		<p class="tdb-transform y1">TDB<br>School</p><br>
		<!--z-direction-->
		<p class="tdb-transform z1">TDB<br>School</p><br>
		</body>
		</html>

Try it Yourself

CSS3 3D TRANSFORM

</CSS3 3D TRANSFORMATION>

CSS 3D Transforms Methods

rotateX() 3D

rotateY() 3D

rotateZ() Method 3D