CSS
3D-transformaties

Opmerkingen

3D kubus

3D-transformaties kunnen worden gebruikt om veel 3D-vormen te maken. Hier is een eenvoudig 3D CSS-kubusvoorbeeld:

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

Bekijk dit voorbeeld
Extra styling is toegevoegd in de demo en een transformatie wordt toegepast bij het zweven om de 6 vlakken van de kubus te bekijken.

Opgemerkt moet worden dat:

• 4 gezichten zijn gemaakt met pseudo-elementen
• geketende transformaties worden toegepast

achtervlak-zichtbaarheid

Het backface-visibility eigenschap heeft betrekking op 3D transformaties.

Met 3D-transformaties en de eigenschap voor backface-visibility de achterkant kunt u een element zodanig roteren dat de oorspronkelijke voorkant van een element niet langer naar het scherm is gericht.

Dit zou bijvoorbeeld een element van het scherm wegdraaien:

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+ en IE 10+ ondersteunen backface-visibility zonder een voorvoegsel. Opera, Chrome, Safari, iOS en Android hebben allemaal -webkit-backface-visibility .

Het heeft 4 waarden:

1. zichtbaar (standaard) - het element is altijd zichtbaar, zelfs wanneer het niet naar het scherm is gericht.
2. verborgen - het element is niet zichtbaar wanneer het niet naar het scherm is gericht.
3. erven - de eigenschap krijgt de waarde van het bovenliggende element
4. initial - stelt de eigenschap in op de standaardwaarde, die zichtbaar is

Kompaswijzer of naaldvorm met behulp van 3D-transformaties

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>

In het bovenstaande voorbeeld wordt een vorm van een naald of kompas gemaakt met 3D-transformaties. Over het algemeen als we passen de rotate te transformeren op een element, de rotatie gebeurt alleen in de Z-as en in het beste geval zullen we eindigen met diamant alleen vormen. Maar wanneer er een rotateY wordt toegevoegd, wordt het element in de Y-as geperst en ziet het er dus uit als een naald. Hoe meer de rotatie van de Y-as, hoe meer samengedrukt het element eruit ziet.

De uitvoer van het bovenstaande voorbeeld zou een naald zijn die op zijn punt rust. Voor het maken van een naald die op zijn basis rust, moet de rotatie langs de X-as zijn in plaats van langs de Y-as. De waarde van de eigenschap transform zou dus iets moeten zijn als rotateX(85deg) rotateZ(45deg); .

Deze pen gebruikt een vergelijkbare aanpak om iets te maken dat lijkt op het Safari-logo of een kompasknop.

Schermafbeelding van element zonder transformatie:

Schermafbeelding van element met alleen 2D-transformatie:

Schermafbeelding van element met 3D-transformatie:

3D teksteffect met schaduw

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

Bekijk een voorbeeld met extra zweefeffect

In dit voorbeeld wordt de tekst getransformeerd zodat deze eruit ziet alsof deze weg van de gebruiker in het scherm komt.

De schaduw wordt dienovereenkomstig getransformeerd, zodat deze de tekst volgt. Omdat het is gemaakt met een pseudo-element en het data , neemt het de transformaties over van zijn ouder (de H1-tag).

Het witte "licht" is gemaakt met een pseudo-element op het #title element. Het is scheef en gebruikt grensradius voor de afgeronde hoek.