The Developer Brains


CSS3 3D TRANSFORM

Web Designing | Web Development


SEE MORE














</CSS3 3D TRANSFORMATION>





CSS 3D Transforms Methods

CSS also supports 3D transformations.
Mouse over the elements below to see the difference between a 2D and a 3D transformation:

rotateX(), rotateY(), rotateZ()


TDB
School



Rotating a <div> block at 180deg in x-direction.

SEE MORE

























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

























which 3d transformation method rotates an element around its X-axis

1. rotateZ()
2. rotateY()
3. rotateX()




Check Now



CSS3 QUIZ







Next: CSS3 Filter Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers