Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The CSS3 scale3d() Function
The scale3d() function is used to scale an element in 3D space. The element is scaled based on numbers set as parameter.
Syntax
The following is the syntax of the scale() method −
scale3d(x,y,z)
Above, x, y, z is the x-axis, y-azis, and z-axis.
Scale an image
Let us now see another example. In this, we will scale an image using the x, y, and z values in the scale3d() method −
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src= "https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
Scale an image with a negative value
Let us now see another example. In this, we will scale an image using a negative value for the x-axis scale3d() method −
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>
Increase the element size in a 3D space
In this example, we have set the transform property to scale the element size in a 3D space. Therefore, all the x, y, and z axis are set. The scale3d() method with a value above 1 will increase the size of an element −
transform: scale3d(1.2, 2.1, 2.2);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale3d(1.2, 2.1, 2.2);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Decrease the element size in a 3D space
In this example, we have set the transform property to scale the element size in a 3D space. Therefore, all the x, y, and z axis are set. The scale3d() method with a value less than 1 will decrease the size of an element −
transform: scale3d(0.5, 0.8, 0.2);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale3d(0.5, 0.8, 0.2);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Increase the image size in a 3D space
In this example, we have set the transform property to scale the image size. The scale3d() will increase the size of an image if it is set bove 1 as shown below −
transform: scale3d(1.2, 2.5, 2.1);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale3d(1.2, 2.5, 2.1);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (increased)</h2>
<img class="scale_img" src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
Decrease the image size in a 3D space
In this example, we have set the transform property to scale the image size. The scale3d() will decrease the size of an image if it is set below 1 as shown below −
transform: scale3d(0.6, 0.5, 0.9);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale3d(0.6, 0.5, 0.9);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (decreased)</h2>
<img class="scale_img" src="https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
77 Views
