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'll discuss how to apply multiple transform properties to an element using CSS, and provide examples of how to leverage this technique to improve your website's user experience.
We'll cover the basic syntax of transform properties, 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
CSS transform Properties enable developers to apply various transformations to HTML elements, such as scaling, rotation, skew, and translation. transform The properties are very versatile and allow for creative and dynamic design on web pages.
grammar
element{
transform: rotate() | scale() | skew() | translate();
}
Example
Let’s take an example of rotating an HTML element using the transform attribute. To rotate an element, we use the rotate function, which takes an angle value (in degrees) as its argument. Here is an example -
<html>
<div class="rotate"> Column </div>
<style>
.rotate {
background-color: orange;
margin: 30px;
width: 70px;
height: 90px;
transform: rotate(45deg);
}
</style>
</html>
Apply two transform properties on an element
To apply multiple transform properties to an element, you simply include each transform property you want to apply in the same CSS rule, separated by spaces.
Example
For example, let's say you want to apply a rotation and scaling effect to an element. Let's take 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 id="CSS-Transform-Properties">CSS Transform Properties</h1>
<h3 id="Given-below-is-a-div-element-which-is-rotated-by-deg-as-well-as-scaled-up-by-on-hovering">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 above example, the .rotate selector locates the element to be transformed, and the transform attribute contains both rotate and scale Functions are separated by spaces.
Therotate function applies a 65-degree rotation to the element, while the scale function scales the element to 150% of its original size. Transform properties are applied when you hover over the element.
Apply multiple transform properties to elements
The shorthand syntax allows you to include multiple transformation functions in a single transform attribute by separating them with commas.
Example
This is an example. 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. translate The function moves the element 40 pixels to the right and 35 pixels down from its original position. Transform properties are applied when you hover over 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 id="CSS-Transform-Properties">CSS Transform Properties</h1>
<h3 id="Given-below-is-a-div-element-which-is-rotated-by-deg-as-well-as-scaled-up-times-on-hovering-Also-it-translates-by-px-and-px">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>
Use multiple transformations
Let's create an animation that flips the card over to show its back when clicked. You can achieve this by using multiple transforms in CSS along with some keyframe animation.
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 id="Front-Side"> 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 id="Back-Side"> 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, we can see the back of the card.
Card is a container containing two child elements, .front and .back, which represent the front and back of the card respectively. The .front and .back elements are absolutely positioned inside the .card container, and their backface-visibility property is set to hidden to prevent them from being visible when facing the user.
When a card is hovered over, it will flip over to reveal its back. When you click on a card, it flips and shrinks to 80% of its original size.
Flip animation will cause the card to rotate 180 degrees in 0.6 seconds, shrink animation will cause the card to shrink to 80% of its original size in the same time period.
When the card is clicked, both animations are applied simultaneously, creating a complex animation that includes multiple transforms and transitions between the front and back faces.
in conclusion
In this article, we learned that applying multiple transform properties using CSS is a simple way to create complex animations and effects of HTML elements. Using the transform attribute, you can apply various transformations, such as scaling, rotation, tilt, and translation, to any HTML element on your web page. By combining multiple transform properties, you can create more dynamic and attractive designs.
The above is the detailed content of How to apply multiple transform properties to an element using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AMThis is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AMThis tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PMThe CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Working With GraphQL CachingMar 19, 2025 am 09:36 AMIf you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AMThe Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Mar 04, 2025 am 10:22 AMThis article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form
Show, Don't TellMar 16, 2025 am 11:49 AMHow much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
What the Heck Are npm Commands?Mar 15, 2025 am 11:36 AMnpm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
