Maison >interface Web >tutoriel CSS >Effet fantastique de dessin CSS : obtenir un effet de cube rotatif 3D
Effet fantastique de dessin CSS : obtenir un effet de cube rotatif 3D
- 王林original
- 2023-10-19 08:55:01780parcourir
Effets fantastiques de dessin CSS : obtenir un effet de cube rotatif 3D
Dans le développement Web, nous avons souvent besoin d'utiliser CSS pour obtenir divers effets fantastiques, et l'un des effets les plus populaires est l'effet de cube rotatif 3D. Nous pouvons facilement obtenir cet effet grâce à la propriété de transformation 3D de CSS. Ci-dessous, je présenterai en détail comment utiliser CSS pour implémenter un cube rotatif 3D et fournirai des exemples de code spécifiques.
Tout d'abord, nous avons besoin d'une structure HTML pour héberger notre cube. Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋转立方体</title>
<style>
.container {
width: 200px;
height: 200px;
perspective: 1000px;
perspective-origin: 50% 50%;
margin: 0 auto;
}
.cube-wrapper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.face {
width: 200px;
height: 200px;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube-wrapper">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>Dans le code ci-dessus, nous utilisons la propriété transform de CSS pour réaliser la rotation et l'ajustement de la position du cube. Tout d'abord, nous créons un conteneur externe (.container) et définissons la propriété de perspective (perspective) et l'origine de la perspective (perspective-origin >). attributs, ces deux attributs sont utilisés pour contrôler l'effet 3D du cube. Ensuite, à l'intérieur du conteneur, nous avons créé un wrapper de cube (.cube-wrapper) et défini l'attribut transform-style:preserve-3d;, qui est utilisé pour créer un nouveau contexte de rendu 3D afin que les éléments internes puissent subir une transformation 3D. Ensuite, nous avons créé 6 faces (.face) et utilisé différentes propriétés transform pour déterminer leur position et leur angle de rotation. transform属性来实现立方体的旋转和位置调整。首先，我们创建了一个外部的容器(.container)，并设置了透视(perspective)属性，以及透视原点(perspective-origin)属性，这两个属性是用来控制立方体的3D效果的。然后，在容器内部，我们创建了一个立方体包裹层(.cube-wrapper)，并设置了transform-style: preserve-3d;属性，这个属性用来创建一个新的3D渲染上下文，使得内部的元素能够进行3D变换。接下来，我们创建了6个面(.face)，并分别使用不同的transform属性来确定它们的位置和旋转角度。
最后，我们添加了一个@keyframes
@keyframes pour modifier continuellement l'angle de rotation du cube afin qu'il puisse continuer à tourner. En analysant le code ci-dessus, nous pouvons voir qu'il n'est pas difficile d'obtenir un effet de cube rotatif 3D. Cela ne nécessite que quelques propriétés CSS de base et quelques effets d'animation simples. Bien sûr, ce n'est qu'un exemple basique, vous pouvez effectuer des ajustements et des extensions plus complexes selon vos besoins. Par exemple, vous pouvez ajouter une image d'arrière-plan différente de chaque côté, utiliser des dégradés de couleurs pour créer un effet tridimensionnel, ajouter du texte ou des icônes, etc. Tant que vous utilisez votre imagination, cet effet de cube rotatif 3D peut devenir encore plus époustouflant. En résumé, en utilisant la propriété de transformation 3D de CSS, nous pouvons facilement obtenir un effet de cube rotatif 3D. Ce qui précède est un exemple de mise en œuvre de base. J'espère qu'il pourra vous fournir des idées et de l'inspiration pour obtenir des effets fantastiques dans le développement Web. Donnez libre cours à votre créativité et créez des effets encore plus époustouflants ! 🎜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!