Dessin CSS : comment obtenir des effets graphiques 3D simples

Dessin CSS : Comment obtenir des effets graphiques 3D simples

Dans la conception Web moderne, pour ajouter de la dynamique et de la tridimensionnalité à la page, des effets graphiques 3D sont souvent nécessaires. Bien que dans le passé, la réalisation d'effets 3D nécessitait l'utilisation de JavaScript ou d'un moteur 3D professionnel, CSS est désormais suffisamment puissant pour réaliser certains effets graphiques 3D simples. Cet article explique comment utiliser CSS pour dessiner des graphiques 3D simples et fournit des exemples de code spécifiques.

1. Dessiner un cube

Pour dessiner un cube simple, nous pouvons utiliser la propriété transform de CSS. Tout d’abord, nous avons besoin d’un élément à six côtés. Nous pouvons utiliser un élément div et définir sa largeur et sa hauteur sur la même valeur. Ensuite, utilisez la propriété CSS transform pour faire pivoter, redimensionner et déplacer l’élément afin d’obtenir un effet 3D.

Ce qui suit est un exemple de code CSS simple pour un cube :

<style>
    .cube {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
    }
    
    .face {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
    }
    
    .front {
        background-color: red;
        transform: translateZ(100px);
    }
    
    .back {
        background-color: green;
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .top {
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
    }
    
    .bottom {
        background-color: yellow;
        transform: translateY(100px) rotateX(-90deg);
    }
    
    .left {
        background-color: orange;
        transform: translateX(-100px) rotateY(-90deg);
    }
    
    .right {
        background-color: purple;
        transform: translateX(100px) rotateY(90deg);
    }
</style>

<div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</div>

Dans le code ci-dessus, nous définissons un élément avec la classe cube comme conteneur du cube et utilisons la propriété CSS transform pour définir son angle de rotation. Dans le même temps, un élément avec une face de classe est également défini comme chaque face du cube, et une couleur d'arrière-plan différente est définie pour chaque face.

2. Dessiner un cylindre

Pour dessiner un cylindre simple, vous pouvez utiliser des pseudo-éléments et des dégradés CSS. Tout d’abord, nous avons besoin d’un conteneur avec un fond circulaire et créons deux pseudo-éléments dans le conteneur, un représentant les côtés et un représentant le dessus. Ensuite, utilisez la propriété CSS transform pour faire pivoter et déplacer le conteneur afin d'obtenir un effet 3D.

Ce qui suit est un exemple de code CSS simple pour un cylindre :

<style>
    .cylinder {
        position: relative;
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateY(30deg);
    }
    
    .cylinder::before,
    .cylinder::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom, #ff5f5f, #ff2929);
        border-radius: 50%;
        opacity: 0.8;
    }
    
    .cylinder::before {
        transform: translateZ(-100px);
        top: 50px;
    }
    
    .cylinder::after {
        transform: translateZ(100px);
        bottom: 50px;
    }
</style>

<div class="cylinder"></div>

Dans le code ci-dessus, nous définissons un élément avec la classe cylindre comme conteneur du cylindre et utilisons la propriété CSS transform pour définir son angle de rotation. En utilisant les pseudo-éléments ::before et ::after, nous créons respectivement les côtés et le haut du cylindre, et utilisons la propriété CSS linear-gradient pour définir la couleur d'arrière-plan du dégradé.

Résumé

En utilisant la propriété transform de CSS, nous pouvons facilement obtenir des effets graphiques 3D simples, tels que des cubes et des cylindres. Ces effets peuvent non seulement ajouter de la tridimensionnalité à la page, mais également améliorer l'expérience utilisateur. J'espère que les exemples de code fournis dans cet article vous seront utiles. Si vous avez des questions, n'hésitez pas à laisser un message.

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!