CSS
3D-omvandlingar

Anmärkningar

3D-kub

3D-omvandlingar kan användas för att skapa många 3D-former. Här är ett enkelt 3D CSS-kubexempel:

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

Visa det här exemplet
Ytterligare styling läggs till i demonstrationen och en transformering appliceras på muspekaren för att se kubens 6 ytor.

Bör noteras att:

• Fyra ansikten är gjorda med pseudoelement
• kedjiga transformationer appliceras

backface-synlighet

backface-visibility hänför sig till 3D-omvandlingar.

Med 3D-transformeringar och backface-visibility kan du rotera ett element så att det ursprungliga framsidan av ett element inte längre vetter mot skärmen.

Till exempel skulle detta vända ett element bort från skärmen:

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+ och IE 10+ stöder backface-visibility utan prefix. Opera, Chrome, Safari, iOS och Android behöver alla -webkit-backface-visibility .

Den har fyra värden:

1. synlig (standard) - elementet kommer alltid att vara synligt även om det inte vetter mot skärmen.
2. dold - elementet är inte synligt när det inte vetter mot skärmen.
3. ärva - fastigheten kommer att få sitt värde från det överordnade elementet
4. initial - ställer in egenskapen till dess standard, som är synlig

Kompasspekare eller nålform med 3D-transformer

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>

I exemplet ovan skapas en nål- eller kompasspekarform med hjälp av 3D-transformer. Generellt när vi tillämpar rotate på ett element, sker rotationen endast i Z-axeln och i bästa fall kommer vi att hamna endast med diamantformer. Men när en rotateY transform läggs ovanpå den, rotateY elementet i Y-axeln och sålunda ser ut som en nål. Ju mer Y-axelns rotation, desto mer pressad ser elementet ut.

Utgången från exemplet ovan skulle vara en nål som vilar på dess spets. För att skapa en nål som vilar på sin bas bör rotationen vara längs X-axeln istället för längs Y-axeln. Så transform värde måste vara något som rotateX(85deg) rotateZ(45deg); .

Den här pennan använder ett liknande tillvägagångssätt för att skapa något som liknar Safari-logotypen eller en kompassratt.

Skärmdump av element utan transformering:

Skärmdump av element med endast 2D-transform:

Skärmdump av element med 3D-transform:

3D-texteffekt med skugga

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

Visa exempel med ytterligare muspekareeffekt

I det här exemplet transformeras texten så att den ser ut som om den går in på skärmen bort från användaren.

Skuggan omvandlas i enlighet med detta så att den följer texten. Som det görs med en pseudoelementet och data attributet, ärver den transformerna bildar det överordnade (H1-tagg).

Det vita "ljuset" är tillverkat med ett pseudoelement på #title . Det är snett och använder gränstradius för det rundade hörnet.