Comment implémenter un cube rotatif avec CSS3

Principalement réalisé grâce à l'attribut transform en CSS3, définissez d'abord l'élément comme un élément 3D, puis définissez les styles des six faces, puis faites-les pivoter via l'attribut transform pour obtenir l'effet de cube rotatif

Maintenant avec CSS3 Avec la maturité et le développement continus, nous pouvons utiliser le style de transformation CSS3, translationZ, rotateX, rotateY, rotateZ, gradient radial, gradient linéaire, perspective et d'autres attributs pour créer un cube 3D qui peut être pivoté. Ensuite, dans l'article, nous présenterons en détail comment obtenir cet effet de cube rotatif via CSS3. Il a une certaine valeur de référence et j'espère qu'il sera utile à tout le monde

[Cours recommandés : Tutoriel CSS3 】

À l'intérieur du cube se trouvent six côtés, qui sont définis comme des éléments graphiques distincts, chacun avec un "arrière", un "haut", un "bas" et une "gauche" séparés. , « droite » et « avant ». Nous devons donc d’abord créer le code html. Contient ces six éléments. Comme indiqué dans le code suivant

<div class="box">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
		<div class="five"></div>
		<div class="six"></div>
	</div>

puis définissez les propriétés CSS de la boîte et définissez-la comme élément 3D. Ici, vous devez faire attention au réglage du positionnement, le but est de permettre aux six éléments de se superposer ensemble

.box{
        position: relative;
        width:200px;
         height:200px;
         transform-style: preserve-3d;/*创造3D空间*/
       -webkit-transform-style: preserve-3d;
        transition: all 5s linear;
	}

L'étape suivante consiste à définir les six faces du cube

.box div{
	width:200px;
	height: 200px;
	position: absolute;
	left: 0;
       top: 0;
       transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       border: 1px solid #46B8DA;
       opacity: 0.5;
	}

Après avoir défini les parties communes des six faces, nous devons définir les effets 3D de ces six faces. Nous pouvons définir les modifications 3D via l'attribut de transformation, qui nous permet de faire pivoter, déplacer, inclinaison, etc.

           .one{
                transform: rotateY(0deg) translateZ(100px);
                background-color:rgb(255,118,19);
            }
            .two{
                transform: rotateY(180deg) translateZ(100px);
                 background-color:rgb(231,78,72);
            }
            .three{
                transform: rotateX(90deg) translateZ(100px);
                 background-color: rgb(75,165,165);
            }
            .four{
                transform: rotateX(-90deg) translateZ(100px);
                 background-color:rgb(129,182,62);
            }
            .five{
                transform: rotateY(90deg) translateZ(100px);
                background-color: rgb(255,118,19);
            }
            .six{
                transform: rotateY(-90deg) translateZ(100px);
                 background-color:rgb(244,208,114);
            }

De cette façon, notre cube est prêt, et il tournera lorsque la souris montera

.box:hover{
                transform: rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotateX(360deg) rotateY(360deg);
            }

Rendu :

Résumé : Ce qui précède est tout le contenu de cet article. J'espère qu'à travers cet article, tout le monde pourra apprendre à implémenter un cube rotatif via CSS3

.

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!