简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Apprenez à jouer avec la technologie 3D scc3

Apprenez à jouer avec la technologie 3D scc3

伊谢尔伦
伊谢尔伦original
2017-02-03 13:48:252356parcourir

Pour jouer avec la 3D en CSS3, vous devez comprendre quelques mots, à savoir perspective, rotation et traduction. La perspective signifie regarder des objets 2D sur l'écran dans une perspective réaliste pour montrer l'effet 3D. La rotation n'est plus une rotation sur un plan 2D, mais une rotation d'un système de coordonnées tridimensionnelles, comprenant une rotation sur l'axe X, l'axe Y et l'axe Z. Il en va de même pour le panoramique.

Bien sûr, je vais l'expliquer théoriquement, mais vous ne le comprenez probablement pas encore. Ci-dessous se trouvent 3 gifs :

Rotation le long de l'axe X

Apprenez à jouer avec la technologie 3D scc3

Rotation le long de l'axe Y

Apprenez à jouer avec la technologie 3D scc3

Rotation le long de l'axe Z

Apprenez à jouer avec la technologie 3D scc3

La rotation ne devrait poser aucun problème, il sera alors plus facile de comprendre la traduction, c'est-à-dire sur l'axe X, Y axe, l'axe z se déplace.

Vous pourriez dire que la perspective est difficile à comprendre. Permettez-moi de vous présenter quelques propriétés de la perspective.

perspective

Le nom anglais de perspective est perspective. Sans cette chose, il n'y a aucun moyen de créer un effet 3D. Mais comment cette chose permet-elle à notre navigateur de créer un effet 3D ? ​Vous pouvez voir l'image suivante. En fait, ceux qui ont étudié la peinture devraient connaître la relation de perspective, et c'est la vérité ici.

Apprenez à jouer avec la technologie 3D scc3

Mais il a une valeur numérique en CSS. Par exemple, que signifie perspective : 1000px ? Nous pouvons le comprendre de cette façon : si nous regardons directement un objet, l'objet sera très grand et occupera notre champ de vision. À mesure que nous nous en éloignons, il deviendra plus petit et la sensation tridimensionnelle augmentera. sortez, non ? En fait, cette structure numérique En déterminant la distance entre nos yeux et l'écran, une illusion virtuelle en 3D est construite.

perspective-origin

À partir de ce qui précède, nous comprenons la perspective et ajoutons quelle est cette origine. Ce que nous avons mentionné plus tôt est la distance entre l'œil et l'objet, et c'est la ligne de vue. de l'œil. Les différentes positions de notre point de vue déterminent les différentes scènes que nous voyons. La valeur par défaut est le centre, qui est l'origine de la perspective : 50% 50%. La première valeur est l'axe X sur lequel est basé l'élément 3D, et le second est défini sur l'axe y. Position sur

Lorsque l'attribut perspective-origin est défini pour un élément, ses éléments enfants obtiennent l'effet de perspective, pas l'élément lui-même. Doit être utilisé avec l'attribut perspective et affecte uniquement les éléments de transformation 3D.

Apprenez à jouer avec la technologie 3D scc3

Mais il a une valeur numérique en CSS. Par exemple, que signifie perspective : 1000px ? Nous pouvons le comprendre de cette façon : si nous regardons directement un objet, l'objet sera très grand et occupera notre champ de vision. À mesure que nous nous en éloignons, il deviendra plus petit et la sensation tridimensionnelle augmentera. sortez, non ? En fait, cette structure numérique En déterminant la distance entre nos yeux et l'écran, une illusion virtuelle en 3D est construite.

transform-style

la perspective est là encore, oui, c'est la clé de la 3D en CSS Le style de transformation par défaut est plat si vous souhaitez avoir un effet 3D sur l'élément. , juste Transform-style : préserver-3d doit être utilisé, sinon ce sera juste une transformation plane, pas une transformation 3D

Nous avons un peu compris le concept ci-dessus, commençons la pratique proprement dite !

Première étape : structure HTML

Un conteneur très simple enveloppe une boîte de pièces contenant 6 pièces

<div class="container">    
    <div class="piece-box">
        <div class="piece piece-1"></div>
        <div class="piece piece-2"></div>
        <div class="piece piece-3"></div>
        <div class="piece piece-4"></div>
        <div class="piece piece-5"></div>
        <div class="piece piece-6"></div>
    </div>
</div>

Étape 2 : Ajouter la 3D nécessaire attributs et entrez dans le monde 3D

Grâce à l'explication ci-dessus, vous devriez être familier avec la perspective, 

/*容器*/
.container {    
    -webkit-perspective: 1000px;    
    -moz-perspective: 1000px;    
    -ms-perspective: 1000px;    
    perspective: 1000px;
}
/*piece盒子*/
 .piece-box {        
      perspective-origin: 50% 50%;        
      -webkit-transform-style: preserve-3d;        
      -moz-transform-style: preserve-3d;       
      -ms-transform-style: preserve-3d;        
      transform-style: preserve-3d;
}

第三步：加入必要的样式

/*容器*/
.container {    
    -webkit-perspective: 1000px;    
    -moz-perspective: 1000px;    
    -ms-perspective: 1000px;    
    perspective: 1000px;
}
/*piece盒子*/
.piece-box {    
     position: relative;    
     width: 200px;    
     height: 200px;    
     margin: 300px auto;    
     perspective-origin: 50% 50%;    
     -webkit-transform-style: preserve-3d;    
     -moz-transform-style: preserve-3d;    
     -ms-transform-style: preserve-3d;    
     transform-style: preserve-3d;
}
/*piece通用样式*/
.piece {    
    position: absolute;    
    width: 200px;    
    height: 200px;    
    background: red;    
    opacity: 0.5;
}
.piece-1 {    
   background: #FF6666;
}
.piece-2 {    
    background: #FFFF00;
}
.piece-3 {    
    background: #006699;
}
.piece-4 {    
    background: #009999;
}
.piece-5 {    
    background: #FF0033;
}
.piece-6 {    
    background: #FF6600;
}

当然，在你完成这步之后你还是只看到一个正方形，也就是我们的piece-6,因为我们的3Dtransform还没开始

Apprenez à jouer avec la technologie 3D scc3

第四步：3D变换来袭

首先是实现走马灯，我们先不要让它走，先实现灯部分。

如何实现呢？因为要构成一个圆，圆是360度，而我们有6个piece，那么，很容易想到，我们需要把每一个piece以递增60度的方式rotateY，就变成如下

Apprenez à jouer avec la technologie 3D scc3

如何把他们从中心拉开呢？

这里我们还要注意一点，在我们使元素绕Y轴旋转以后，其实X轴和Z轴也会跟着旋转，所所以正方体的每个面的垂直线还是Z轴，我们就只需要改变下translateZ的值,而当translateZ为正的时候，就朝着我们的方向走来，这样就可以拉开了

但是拉开的距离如何衡量？

Apprenez à jouer avec la technologie 3D scc3

是不是一目了然了~

下面我们再修改下css

.piece-1 {    
    background: #FF6666;    
    -webkit-transform: rotateY(0deg) translateZ(173.2px);    
    -ms-transform: rotateY(0deg) translateZ(173.2px);    
    -o-transform: rotateY(0deg) translateZ(173.2px);    
    transform: rotateY(0deg) translateZ(173.2px);

}
.piece-2 {    
    background: #FFFF00;    
    -webkit-transform: rotateY(60deg) translateZ(173.2px);    
    -ms-transform: rotateY(60deg) translateZ(173.2px);    
    -o-transform: rotateY(60deg) translateZ(173.2px);    
    transform: rotateY(60deg) translateZ(173.2px);
}
.piece-3 {    
    background: #006699;    
    -webkit-transform: rotateY(120deg) translateZ(173.2px);    
    -ms-transform: rotateY(120deg) translateZ(173.2px);    
    -o-transform: rotateY(120deg) translateZ(173.2px);    
    transform: rotateY(120deg) translateZ(173.2px);
}
.piece-4 {    
    background: #009999;    
    -webkit-transform: rotateY(180deg) translateZ(173.2px);    
    -ms-transform: rotateY(180deg) translateZ(173.2px);    
    -o-transform: rotateY(180deg) translateZ(173.2px);    
    transform: rotateY(180deg) translateZ(173.2px);
}
.piece-5 {    
    background: #FF0033;    
    -webkit-transform: rotateY(240deg) translateZ(173.2px);    
    -ms-transform: rotateY(240deg) translateZ(173.2px);    
    -o-transform: rotateY(240deg) translateZ(173.2px);    
    transform: rotateY(240deg) translateZ(173.2px);
}
.piece-6 {    
    background: #FF6600;    
    -webkit-transform: rotateY(300deg) translateZ(173.2px);    
    -ms-transform: rotateY(300deg) translateZ(173.2px);    
    -o-transform: rotateY(300deg) translateZ(173.2px);    
    transform: rotateY(300deg) translateZ(173.2px);
}

是不是已经实现了走马灯了？

Apprenez à jouer avec la technologie 3D scc3

第五步：animation让3D动起来

要实现走马灯动，其实很简单，我们只要在piece-box上加上旋转动画就行了,5s完成动画，从0度旋转到360度

/*piece盒子*/
.piece-box {    
    position: relative;    
    width: 200px;    
    height: 200px;    
    margin: 300px auto;    
    perspective-origin: 50% 50%;    
    -webkit-transform-style: preserve-3d;    
    -moz-transform-style: preserve-3d;    
    -ms-transform-style: preserve-3d;    
    transform-style: preserve-3d;    
    animation: pieceRotate 5s;    
    -moz-animation: pieceRotate 5s; /* Firefox */
    -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
    -o-animation: pieceRotate 5s ; /* Opera */
}
/*走马灯动画*/
@keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}
/* Opera */
@-o-keyframes pieceRotate
{
0%   {-webkit-transform: rotateY(0deg);        
         -ms-transform: rotateY(0deg);        
         -o-transform: rotateY(0deg);        
         transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(360deg);        
       -ms-transform: rotateY(360deg);        
       -o-transform: rotateY(360deg);        
       transform: rotateY(360deg);}
}

还没结束哦~更酷炫的正方体组装

正方体，其实也不难实现，我这里就不很详细说了，你首先可以想象一个面，然后去拓展其他面如何去实现，比如我们把正方体的前面translateZ(100px）让它靠近我们100px,然后后面translateZ(-100px）让它远离我们100px,左边是先translateX(-100px再rotateY(90deg),右边就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px)，rotateX(90deg)，下面是先translateY(100px)，rotateX(90deg)，只要我们写进动画，一切就大功告成。

css就为如下，以下就只放piece1，其他读者可以自己类比实现

.piece-1 {     
     background: #FF6666;     
     -webkit-transform: rotateY(0deg) translateZ(173.2px);     
     -ms-transform: rotateY(0deg) translateZ(173.2px);     
     -o-transform: rotateY(0deg) translateZ(173.2px);     
     transform: rotateY(0deg) translateZ(173.2px);     
     animation: piece1Rotate 5s 5s;     
     -moz-animation: piece1Rotate 5s 5s; /* Firefox */
     -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
     -o-animation: piece1Rotate 5s 5s; /* Opera */
     -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
      animation-fill-mode: forwards;
 }
 /*front*/
 @keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Firefox */
 @-moz-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Safari and Chrome */
 @-webkit-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }
  /* Opera */
 @-o-keyframes piece1Rotate
 {
 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     
       -ms-transform: rotateY(0deg) translateZ(173.2px);     
       -o-transform: rotateY(0deg) translateZ(173.2px);     
       transform: rotateY(0deg) translateZ(173.2px);}
 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     
       -ms-transform:  rotateY(0deg) translateZ(100px);     
       -o-transform: rotateY(0deg)  translateZ(100px);     
       transform:  rotateY(0deg) translateZ(100px);}
 }

细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果，也就是正方体的效果，读者可以不加试试看，那还是会恢复原样。

最后就是正方体的旋转了，前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了，hhh，animaiton会覆盖掉前面的，那前面的走马灯的动画就没了，所以在html结构中，我再加了一个box包裹piece, 如下

<div class="container">
    <div class="piece-box">
        <div class="piece-box2"><!--新加的容器-->
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>
</div>

在动画上我们可以控制正方体动画的延时时间，就是等到正方体组装完成后再开始动画

animation: boxRotate 5s 10s infinite;第一个5s是动画时长，第二个10s是延时时间，然后我们让正方体的旋转，绕X轴从0度到360度,绕Y轴也0到Y轴360度。

.piece-box2 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: boxRotate 5s 10s infinite;
    -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
    -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
    -o-animation: boxRotate 5s 10s infinite; /* Opera */
}
/*正方体旋转动画*/
@keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Firefox */
@-moz-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Safari and Chrome */
@-webkit-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}
/* Opera */
@-o-keyframes boxRotate
{
0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
    -ms-transform: rotateX(0deg) rotateY(0deg););
    -o-transform: rotateX(0deg) rotateY(0deg););
    transform: rotateX(0deg) rotateY(0deg););}
100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
    -ms-transform: rotateX(360deg) rotateY(360deg);
    -o-transform: rotateX(360deg) rotateY(360deg);
    transform: rotateX(360deg) rotateY(360deg);}
}

最后效果，大功告成！

Apprenez à jouer avec la technologie 3D scc3

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Astuces CSS : nombres aléatoires en CSSArticle suivant：Astuces CSS : nombres aléatoires en CSS

Articles Liés

Voir plus