- Trending Categories
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
How to apply multiple transform property to an element using CSS?
One of the most powerful features of CSS is the ability to apply multiple transforms to an element, which can be used to create stunning visual effects and animations. In this article, we will discuss how to apply multiple transform properties to an element using CSS, and we will provide examples of how this technique can be used to enhance the user experience on a website.
We will cover the basic syntax of the transform property, as well as more advanced techniques such as nesting transforms and using multiple transforms to create complex animations. Whether you are a beginner or an experienced web developer, this article will provide you with the knowledge and skills you need to take your CSS skills to the next level.
CSS Transform Property
The CSS transform property enables the developers to apply variety of transformations to HTML elements, such as scaling, rotating, skewing, and translating. The transform property is very versatile and allows for creative and dynamic designs on web pages.
Syntax
element{
transform: rotate() | scale() | skew() | translate();
}
Example
Let's take an example of using the transform property to rotate an HTML element. To rotate an element, we use the rotate function, which takes an angle value in degrees as its argument. Here's an example −
<html>
<div class="rotate"> Column </div>
<style>
.rotate {
background-color: orange;
margin: 30px;
width: 70px;
height: 90px;
transform: rotate(45deg);
}
</style>
</html>
Applying two Transform Properties on an Element
To apply multiple transform properties to an element, you simply need to include each transform property that you want to apply in the same CSS rule, separated by spaces.
Example
For example, let's say you want to apply both a rotation and a scaling effect to an element. Let’s have a look.
<html>
<head>
<style>
.rotate {
background-color: orange;
margin: 50px;
width: 70px;
height: 60px;
text-align: center;
letter-spacing: 1px;
}
.rotate:hover {
transform: rotate(65deg) scale(1.5);
}
</style>
</head>
<body>
<h1>CSS Transform Properties</h1>
<h3>Given below is a div element which is rotated by 65deg as well as scaled up by 1.5 on hovering.</h3>
<div class="rotate"> Column </div>
</body>
</html>
In the example above, the .rotate selector targets the element you want to transform, and the transform property includes both the rotate and scale functions separated by a space.
The rotate function applies a 65-degree rotation to the element, while the scale function scales the element to 150% of its original size. The transform property is applied when you hover on the element.
Applying More Than one Transform Properties to an Element
The shorthand syntax allows you to include multiple transform functions within a single transform property by separating them with commas.
Example
Here, is an example. In here, the rotate function applies a 65-degree rotation to the element, while the scale function scales the element to 150% of its original size. The translate function moves the element 40 pixels to the right and 35 pixels down from its original position. The transform property is applied when you hover on the element.
<html>
<head>
<style>
.rotate {
background-color: yellow;
margin-left: 80px;
width: 70px;
height: 60px;
text-align: center;
letter-spacing: 1px;
}
.rotate:hover {
transform: rotate(65deg) scale(1.5) translate(40px, 35px);
}
</style>
</head>
<body>
<h1>CSS Transform Properties</h1>
<h3>Given below is a div element which is rotated by 65deg as well as scaled up 150 times on hovering. Also, it translates by 40px and 35px.</h3>
<div class="rotate"> Column </div>
</body>
</html>
Using Multiple Transforms
Let's create an animation where a card flips over to reveal its back side when it's clicked. You can achieve this by using multiple transforms in CSS, along with some keyframe animations.
Example
<html>
<head>
<style>
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: all 0.6s ease-in-out;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: #FFFDD0;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: #FFDEAD;
transform: rotateY(180deg);
}
.card:hover {
transform: rotateY(180deg);
}
.card:active {
transform: rotateY(180deg) scale(0.8);
}
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
@keyframes shrink {
from {
transform: rotateY(180deg) scale(1);
}
to {
transform: rotateY(180deg) scale(0.8);
}
}
.card:active {
animation: flip 0.6s ease-in-out, shrink 0.6s ease-in-out;
}
</style>
</head>
<body>
<div class="card">
<div class="front">
<h2> Front Side </h2>
<p> Hello World!! This is the front side of the card. Hover on me to see the back side. </p>
</div>
<div class="back">
<h2> Back Side </h2>
<p> Hello World!! This is the back side of the card. </p>
</div>
</div>
</body>
</html>
When the front card is hovered, then we can see the back side of the card.
The card is a container with two children, .front and .back, which represent the front and back sides of the card. The .front and .back elements are positioned absolutely inside the .card container, and their backface-visibility property is set to hidden to prevent them from being visible when they're facing away from the user.
When the card is hovered over, it will flip over to reveal its back side. When the card is clicked, it will flip over and shrink to 80% of its original size.
The flip animation will make the card rotate 180 degrees over the course of 0.6 seconds, and the shrink animation will make the card shrink to 80% of its original size over the same period of time.
When the card is clicked, both animations will be applied simultaneously, creating a complex animation that includes multiple transforms and a transition between front and back sides.
Conclusion
In this article, we learnt that applying multiple transform properties using CSS is a straightforward way to create complex animations and effects for HTML elements. With the transform property, you can apply various transformations such as scaling, rotating, skewing, and translating, to any HTML element on your web page. By combining multiple transform properties, you can create even more dynamic and engaging designs.
970 Views
