How to apply multiple transform properties to an element using CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to apply multiple transform properties to an element using CSS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 am 11:17 AM

如何使用 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'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.

The

rotate 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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

What is the syntax for CSS?Apr 28, 2025 pm 05:23 PM

Article discusses CSS syntax, learning strategies, common mistakes, and validation tools. Main focus is on mastering CSS through practice and understanding.

See all articles