CSS 如何将多个变换属性应用于元素

CSS的一个最强大的特性是能够将多个变换应用于元素，这可以用来创建令人惊叹的视觉效果和动画。在本文中，我们将讨论如何使用CSS将多个变换属性应用于元素，并提供使用这种技术来增强网站用户体验的示例。

我们将涵盖变换属性的基本语法，以及更高级的技术，如嵌套变换和使用多个变换创建复杂动画。无论您是初学者还是经验丰富的网页开发人员，本文都将为您提供所需的知识和技能，帮助您将CSS技能提升到新的水平。

CSS变换属性

CSS的 transform 属性使开发人员能够对HTML元素应用各种变换，如缩放、旋转、扭曲和平移。变换属性非常灵活，可以在网页上实现创意和动态的设计。

语法

element{
   transform: rotate() | scale() | skew() | translate();
}

示例

让我们以使用 transform 属性来旋转HTML元素的示例为例。要旋转元素，我们使用 rotate 函数，它以角度值作为参数。以下是一个示例 –

<html>
   <div class="rotate"> Column </div>
   <style>
      .rotate {
         background-color: orange;
         margin: 30px;
         width: 70px;
         height: 90px;
         transform: rotate(45deg);
      }
   </style>
</html>

应用两个变换属性在元素上

要在一个元素上应用多个变换属性，你只需要在同一个CSS规则中包含你想应用的每个变换属性，用空格分隔。

示例

例如，假设你想在一个元素上同时应用旋转和缩放效果。让我们来看一下。

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

在上面的示例中， .rotate 选择器会选择要进行变换的元素，而 transform 属性则包含了用空格分隔的 rotate 和 scale 函数。

rotate 函数将元素旋转65度，而 scale 函数将元素缩放到原始大小的150%。当你悬停在元素上时，会应用transform属性。

将多个变换属性应用到一个元素

简写语法允许你在一个 transform 属性中使用逗号将多个变换函数分隔开。

示例

这里是一个示例。在这个示例中， rotate 函数将元素旋转65度， scale 函数将元素缩放到原始大小的150%。而 translate 函数将元素从原始位置向右移动40像素，向下移动35像素。当你悬停在元素上时，会应用transform属性。

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

使用多个变换

让我们创建一个动画，在点击时翻转卡片以显示其背面。您可以通过在CSS中使用多个变换以及一些关键帧动画来实现这一点。

示例

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

当鼠标悬停在前面的卡片上时，我们可以看到卡片的背面。

该卡片是一个容器，有两个子元素， .front 和 .back， 分别代表卡片的正面和背面。正面和背面元素是绝对定位在卡片容器内，它们的 backface-visibility 属性被设置为 hidden ，以防止它们在面向用户时可见。