@coder 1141
CSS3 3D TRANSFORM
2021-11-17 00:03 · 5 min read
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()
Rotating a <div> block at 180deg in x-direction.
rotateX() 3D
The rotateX() method rotates an element around its X-axis at a given degree:
<style>
div {transform: rotateX(150deg);
}
</style>
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>
rotateY() 3D
The rotateY() method rotates an element around its Y-axis at a given degree:
<style>
div {transform: rotateY(130deg);
}
</style>
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>
rotateZ() Method 3D
The rotateZ() method rotates an element around its Z-axis at a given degree:
<style>
div {
transform: rotateZ(90deg);
}
</style>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><!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>
TAGS:
POPULAR POSTS
best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
