CSS
Trasformazioni 3D

Osservazioni

Cubo 3D

Le trasformazioni 3D possono essere utilizzate per creare molte forme 3D. Ecco un semplice esempio di cubo 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);
}

Guarda questo esempio
Nella demo è stato aggiunto uno stile aggiuntivo e una trasformazione viene applicata al passaggio del mouse per visualizzare le 6 facce del cubo.

Va notato che:

• 4 facce sono fatte con pseudo elementi
• vengono applicate trasformazioni concatenate

controfaccia visibilità

La proprietà di backface-visibility riferisce a trasformazioni 3D.

Con le trasformazioni 3D e la proprietà di backface-visibility del backface-visibility , puoi ruotare un elemento in modo tale che il fronte originale di un elemento non sia più rivolto verso lo schermo.

Ad esempio, questo capovolgerebbe un elemento dallo schermo:

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+ e IE 10+ supportano la backface-visibility senza prefisso. Opera, Chrome, Safari, iOS e Android richiedono tutti -webkit-backface-visibility .

Ha 4 valori:

1. visibile (predefinito): l'elemento sarà sempre visibile anche quando non è rivolto verso lo schermo.
2. nascosto - l'elemento non è visibile quando non è rivolto verso lo schermo.
3. inherit : la proprietà otterrà il suo valore dal relativo elemento padre
4. iniziale : imposta la proprietà sul valore predefinito, che è visibile

Puntatore della bussola o forma dell'ago mediante trasformazioni 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>

Nell'esempio sopra, una forma di ago o bussola viene creata utilizzando trasformazioni 3D. Generalmente quando applichiamo la trasformazione di rotate su un elemento, la rotazione avviene solo sull'asse Z e nella migliore delle ipotesi finiremo con le sole figure diamantate. Ma quando viene aggiunta una trasformazione rotateY su di essa, l'elemento viene schiacciato nell'asse Y e finisce quindi con l'aspetto di un ago. Maggiore è la rotazione dell'asse Y, più spremuta l'aspetto dell'elemento.

L'output dell'esempio precedente sarebbe un ago appoggiato sulla punta. Per creare un ago che poggia sulla sua base, la rotazione dovrebbe essere lungo l'asse X anziché lungo l'asse Y. Quindi il valore della proprietà di transform dovrebbe essere qualcosa come rotateX(85deg) rotateZ(45deg); .

Questa penna utilizza un approccio simile per creare qualcosa che assomigli al logo Safari o al quadrante di una bussola.

Screenshot dell'elemento senza trasformazione:

Schermata dell'elemento con solo trasformazione 2D:

Screenshot dell'elemento con trasformazione 3D:

Effetto testo 3D con ombra

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;
}

Visualizza l'esempio con effetto hover aggiuntivo

In questo esempio, il testo viene trasformato per far sembrare che stia andando sullo schermo lontano dall'utente.

L'ombra viene trasformata di conseguenza in modo che segua il testo. Poiché è realizzato con uno pseudo elemento e l'attributo data , eredita le trasformazioni dal genitore (il tag H1).

La "luce" bianca è creata con uno pseudo elemento sull'elemento #title . È inclinato e usa il raggio del bordo per l'angolo arrotondato.