CSS
Transformations 3D

Remarques

Cube 3D

Les transformations 3D peuvent être utilisées pour créer de nombreuses formes 3D. Voici un exemple simple de cube CSS 3D:

HTML:

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS:

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

Voir cet exemple
Un style supplémentaire est ajouté dans la démo et une transformation est appliquée lors du survol pour afficher les 6 faces du cube.

Devrait être noté que:

• 4 faces sont faites avec des pseudo-éléments
• les transformations chaînées sont appliquées

visibilité sur la face arrière

La propriété de backface-visibility concerne les transformations 3D.

Grâce aux transformations 3D et à la propriété de backface-visibility , vous pouvez faire pivoter un élément de sorte que le recto d'origine d'un élément ne soit plus en regard de l'écran.

Par exemple, cela ferait disparaître un élément de l'écran:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+ et IE 10+ prennent en charge la backface-visibility sans préfixe. Opera, Chrome, Safari, iOS et Android nécessitent tous une -webkit-backface-visibility .

Il a 4 valeurs:

1. visible (par défaut) - l'élément sera toujours visible même lorsque vous ne faites pas face à l'écran.
2. hidden - l'élément n'est pas visible lorsqu'il n'est pas face à l'écran.
3. inherit - la propriété va obtenir sa valeur de l'élément parent
4. initial - définit la propriété à sa valeur par défaut, qui est visible

Compas pointeur ou forme d'aiguille à l'aide de transformations 3D

CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

Dans l'exemple ci-dessus, une forme de pointeur d'aiguille ou de boussole est créée à l'aide de transformations 3D. Généralement, lorsque nous appliquons la transformation de rotate sur un élément, la rotation ne se produit que sur l'axe des Z et au mieux, nous nous retrouverons avec des formes de diamant uniquement. Mais lorsqu'une transformation rotateY est ajoutée par dessus, l'élément est comprimé sur l'axe des Y et finit par ressembler à une aiguille. Plus la rotation de l'axe des Y est importante, plus l'élément est compressé.

La sortie de l'exemple ci-dessus serait une aiguille posée sur sa pointe. Pour créer une aiguille qui repose sur sa base, la rotation doit se faire sur l'axe des abscisses plutôt que sur l'axe des ordonnées. La valeur de la propriété transform devrait donc être quelque chose comme rotateX(85deg) rotateZ(45deg); .

Ce stylet utilise une approche similaire pour créer quelque chose qui ressemble au logo Safari ou à un cadran de la boussole.

Capture d'écran de l'élément sans transformation:

Capture d'écran de l'élément avec uniquement une transformation 2D:

Capture d'écran d'élément avec transformation 3D:

Effet de texte 3D avec ombre

HTML:

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

Voir l'exemple avec un effet de survol supplémentaire

Dans cet exemple, le texte est transformé pour donner l’impression qu’il entre à l’écran de l’utilisateur.

L'ombre est transformée en conséquence pour suivre le texte. Comme il est fait avec un pseudo-élément et l'attribut data , il hérite des transformations de son parent (la balise H1).

La "lumière" blanche est faite avec un pseudo-élément sur l'élément #title . Il est incliné et utilise border-radius pour le coin arrondi.