Comment ajouter des effets spéciaux avec le contrôle Elementor CSS Transform

Elementor est un constructeur de pages très puissant qui permet aux concepteurs de créer des pages web belles et fonctionnelles sans connaissances en programmation. En plus de son interface intuitive de type "glisser-déposer", Elementor offre plusieurs outils de conception avancés, tels que Transformation CSS Contrôles. Grâce à ces contrôles, il est possible deAjouter des transformations telles que la rotation, le décalage, le zoom, l'inclinaison et le retournement aux éléments de la page.La forme de l'image est très claire, ce qui crée un effet visuel distinctif.

Dans ce billet, nous verrons comment utiliser la fonction Transformation CSS des contrôles pour ajouter des effets spéciaux à vos dessins, avec des instructions détaillées sur l'utilisation de chaque effet et des scénarios d'application pratiques.

Qu'est-ce que le contrôle CSS Transform ?

Le contrôle CSS Transform vous permet de créer un nouveau contrôle CSS Transform à l'aide de la fonctionRotation, zoom, décalage, inclinaison et retournementetc.Modifier les widgets sur la pageCes contrôles sont disponibles dans la section " Elementor " d'Elementor. Ces contrôles sont listés dans la section "Onglet Avancé"Sous".une transformationL'option "hover", qui se trouve dans les paramètres, prend en charge à la fois l'état normal et l'état de survol. Lorsque vous modifiez l'état de survol, vous pouvez égalementRéglage de la durée de l'effetpour s'assurer que l'effet est régulier et non saccadé.

Description des contrôles

Chaque effet de transformation peut être réglé sur différentes valeurs pour différents points de rupture d'écran. L'écran "Responsive Settings" est accessible en cliquant sur l'icône de l'appareil dans l'onglet du contrôle afin d'obtenir les meilleurs résultats sur différents appareils.

Rotation

tournerpermet de faire pivoter les éléments de la page autour d'un axe spécifique. La rotation est réalisée à l'aide de curseurs ou en remplissant directement le champ de saisie avec la valeur de l'angle (sous la forme d'unla force (alcool, lentilles, etc.)(en unités), vous pouvez facilement ajuster l'effet de rotation.

• Rotation ordinaire : Fait pivoter l'élément le long de l'axe Z (plan 2D).

• Rotation en 3D : Si des effets visuels plus complexes sont nécessaires, vous pouvez activer la rotation 3D, ce qui permet à l'image d'être plus précise. X, Y et Z La rotation 3D peut également être combinée avec des effets de perspective (en pixels) pour améliorer la tridimensionnalité.

Applications pratiques : Par exemple, vous pouvez ajouter un bouton avec une icône à la rubrique Effet de rotation 3DLe bouton pivote légèrement lorsque l'utilisateur le survole pour donner vie à la conception.

Échelle

La commande Zoom permet de mettre à l'échelle les éléments de la page. Vous pouvez effectuer une mise à l'échelle proportionnelle (Mise à l'échelle simultanée des axes X et Y), ou vous pouvez ajuster l'échelle d'un axe individuellement. Les éléments peuvent être redimensionnés à l'aide de curseurs ou en saisissant un pourcentage directement dans la zone de saisie.

• L'égalité d'échelle : Par défaut, les axes X et Y sont mis à l'échelle en même temps, en conservant l'échelle originale de l'élément.
• Échelonnement individuel : Si vous souhaitez changer d'échelle dans une direction, vous pouvez déverrouiller l'échelle pour ajuster les axes X ou Y individuels.

Applications pratiques : Par exemple, il est possible de faire en sorte que certains boutons ou images soient légèrement agrandis lorsque l'utilisateur les survole afin d'attirer l'attention sur eux.

Obliquité

maigreCette commande permet d'ajouter un effet d'inclinaison à l'élément sur les axes X et Y. L'angle d'inclinaison peut être facilement ajusté à l'aide du curseur ou en entrant une valeur en pourcentage dans la zone de saisie.

• Inclinaison de l'axe X : horizontaleDirection Tilt.
• Inclinaison de l'axe Y : perpendiculaireDirection Tilt.

Applications pratiques : L'effet d'inclinaison peut ajouter un certain dynamisme à une image ou à un bloc de texte, et est particulièrement utile pour créer des designs modernes et uniques.

Retournement horizontal et vertical (Flip)

• Retourner horizontalement : Placer un élément sur l'axe X de l'imagemiroirRetournement.
• Retournement vertical : Placer l'élément sur l'axe YmiroirRetournement.

Applications pratiques : Les effets de bascule peuvent être appliqués aux images, aux icônes ou à d'autres éléments visuels pour améliorer l'expérience interactive en permettant à l'utilisateur de voir l'autre côté de l'élément lorsqu'il le survole.

Point d'ancrage

Le contrôle d'ancrage permet de définir le point de départ de la transformation, c'est-à-dire le point central de l'élément lorsqu'il est tourné, mis à l'échelle ou incliné. Cette option est facultative :

• Ancrages horizontaux : À gauche, au centre et à droite.
• Ancrages verticaux : En haut, au centre, en bas.

En ajustant le point d'ancrage, vous pouvez contrôler plus précisément l'effet de la transformation. Par exemple, si vous fixez le point d'ancrage au coin supérieur gauche d'un élément, l'élément tournera autour du coin supérieur gauche lorsque vous ferez pivoter l'icôneAu lieu du centre.

Applications pratiques : Par exemple, les positions d'ancrage peuvent être ajustées pour créer des effets visuels plus complexes lorsque des effets de rotation ou d'inclinaison asymétriques sont souhaités.

Comment définir la transformation CSS pour l'état de survol

Dans Elementor, il n'est pas seulement possible de mettre en place uneTransformations CSS pour définir l'état régulier d'un élément de pageVous pouvez également définir différents effets pour l'état de survol (c'est-à-dire lorsque l'utilisateur passe le pointeur de la souris sur l'élément). Pour modifier la transformation de l'état de survol, vous pouvez :

1. Sélectionnez l'élément et allez à "Onglet Avancé".
2. Ajustez les paramètres de transformation et choisissez des effets tels que la rotation, le décalage, l'échelle, l'inclinaison ou le retournement.

3. Paramètres"Durée de l'effet"pour faciliter le processus de transformation.

Applications pratiques : Dans la conception de sites web, les effets de survol peuvent améliorer efficacement l'expérience de l'utilisateur. Par exemple, des effets de rotation et de zoom peuvent être déclenchés lorsque l'utilisateur passe la souris sur un bouton, ce qui rend le bouton plus intéressant et interactif.

Exemple pratique : comment utiliser CSS Transform pour obtenir un effet de bouton en 3D.

Voici un tutoriel simple pour créer un effet de bouton en 3D à l'aide du contrôle CSS Transform :

1. Ajouter des widgets de boutons : Dans l'éditeur de page Elementor, ajoutez un widget de bouton.
2. Saisir les paramètres de transformation : Après avoir sélectionné le bouton, allez à "Onglet Avancé">"une transformation".

3. Appliquer des effets de rotation et de perspective :
   • Activez la rotation 3D dans les paramètres de rotation.
   • Définissez les valeurs de rotation pour l'axe X et l'axe Y. Il est recommandé de maintenir l'angle de rotation à moins de 10 degrés pour garantir un effet naturel.
   • Combinez cela avec un effet de perspective, par exemple en réglant la valeur de la perspective sur 800px pour renforcer l'effet 3D.

4. Définir l'effet de survol : Au survol, réglez l'angle de rotation sur 0 degré et ajoutez un effet de zoom en réglant la valeur du zoom sur 1,1 pour que le bouton soit agrandi au survol.

Grâce à cette simple transformation, vous pouvez facilement créer un bouton interactif avec un effet 3D pour améliorer l'expérience visuelle de l'utilisateur.

résumés

CSS Transform est une partie importante des puissantes fonctionnalités de conception d'Elementor, permettant aux concepteurs d'ajouter des effets riches et dynamiques aux pages en quelques actions simples. Qu'il s'agisse de rotation, de mise à l'échelle, d'inclinaison ou de retournement, toutes les commandes peuvent être combinées de manière flexible pour ajouter de la dimension et de l'intérêt à vos conceptions.