Maison > Article > interface Web > Comment appliquer plusieurs propriétés de transformation à un élément en utilisant CSS ?
Comment appliquer plusieurs propriétés de transformation à un élément en utilisant CSS ?
- WBOYavant
- 2023-09-02 11:17:021277parcourir
L'une des fonctionnalités les plus puissantes de CSS est la possibilité d'appliquer plusieurs transformations à un élément, qui peuvent être utilisées pour créer des effets visuels et des animations époustouflants. Dans cet article, nous expliquerons comment appliquer plusieurs propriétés de transformation à un élément à l'aide de CSS et fournirons des exemples sur la manière d'exploiter cette technique pour améliorer l'expérience utilisateur de votre site Web.
Nous aborderons la syntaxe de base des propriétés de transformation, ainsi que des techniques plus avancées telles que l'imbrication des transformations et l'utilisation de plusieurs transformations pour créer des animations complexes. Que vous soyez un développeur Web débutant ou expérimenté, cet article vous fournira les connaissances et les compétences dont vous avez besoin pour faire passer vos compétences CSS au niveau supérieur.
Propriété de transformation CSS
La propriétéCSS transform permet aux développeurs d'appliquer diverses transformations aux éléments HTML, telles que la mise à l'échelle, la rotation, l'inclinaison et la traduction. L'attribut transform est très polyvalent et permet une conception créative et dynamique sur les pages Web.
Grammaire
element{
transform: rotate() | scale() | skew() | translate();
}
Exemple
Prenons un exemple de rotation d'un élément HTML à l'aide de l'attribut transform. Pour faire pivoter un élément, nous utilisons la fonction rotate, qui prend comme argument une valeur d'angle (en degrés). Voici un exemple -
<html>
<div class="rotate"> Column </div>
<style>
.rotate {
background-color: orange;
margin: 30px;
width: 70px;
height: 90px;
transform: rotate(45deg);
}
</style>
</html>
Appliquer deux propriétés de transformation sur un élément
Pour appliquer plusieurs propriétés de transformation à un élément, il vous suffit d'inclure chaque propriété de transformation que vous souhaitez appliquer dans la même règle CSS, séparées par des espaces.
Exemple
Par exemple, disons que vous souhaitez appliquer un effet de rotation et de mise à l'échelle à un élément. Jetons un coup d'oeil.
<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>
Dans l'exemple ci-dessus, le sélecteur .rotate localise l'élément à transformer, et l'attribut transform contient à la fois les fonctions rotate et scale séparées par des espaces.
La fonctionrotate applique une rotation de 65 degrés à l'élément, tandis que la fonction scale redimensionne l'élément à 150 % de sa taille d'origine. Les propriétés de transformation sont appliquées lorsque vous survolez l'élément.
Appliquer plusieurs propriétés de transformation aux éléments
La syntaxe abrégée vous permet d'inclure plusieurs fonctions de transformation dans un seul attribut transform en les séparant par des virgules.
Exemple
Voici un exemple. Ici, la fonction rotate applique une rotation de 65 degrés à l'élément, tandis que la fonction scale redimensionne l'élément à 150 % de sa taille d'origine. La fonction translate déplace l'élément de 40 pixels vers la droite et de 35 pixels vers le bas par rapport à sa position d'origine. Les propriétés de transformation sont appliquées lorsque vous survolez l'élément.
<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>
Utilisez plusieurs transformations
Créons une animation qui retourne la carte pour montrer son dos lorsque vous cliquez dessus. Vous pouvez y parvenir en utilisant plusieurs transformations en CSS ainsi qu'une animation d'images clés.
Exemple
<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>
Lorsque le recto de la carte est survolé, nous pouvons voir le verso de la carte.
Card est un conteneur contenant deux éléments enfants, .front et .back, qui représentent respectivement le recto et le verso de la carte. Les éléments .front et .back sont positionnés absolument à l'intérieur du conteneur .card, et leur propriété backface-visibility est définie sur hidden pour les empêcher d'être visibles face à l'utilisateur.
Lorsqu'une carte est survolée, elle se retourne pour révéler son verso. Lorsque vous cliquez sur une carte, elle se retourne et se réduit à 80 % de sa taille d'origine.
L'animation Flip fera pivoter la carte de 180 degrés en 0,6 seconde, et l'animation Shrink fera rétrécir la carte à 80 % de sa taille d'origine dans le même laps de temps.
Lorsque vous cliquez sur une carte, les deux animations sont appliquées simultanément, créant une animation complexe qui comprend de multiples transformations et transitions entre le recto et le verso.
Conclusion
Dans cet article, nous avons appris que l'application de plusieurs propriétés de transformation à l'aide de CSS est un moyen simple de créer des animations et des effets complexes d'éléments HTML. À l'aide de l'attribut transform, vous pouvez appliquer diverses transformations telles que la mise à l'échelle, la rotation, l'inclinaison et la traduction à n'importe quel élément HTML de votre page Web. En combinant plusieurs propriétés de transformation, vous pouvez créer des conceptions plus dynamiques et attrayantes.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!