css 3d

by Dörnesz Tamás

HTML

<div id="div1" onClick="active3d('div1');" class="main">
  <h1>Perspective (150px)</h1>
  <div class="sub div1">DIV1</div>
  <div class="sub div2">DIV2</div>
  <div class="sub div3">DIV3</div>
  <div class="sub div4">DIV4</div>
  <div class="sub div5">DIV5</div>
</div>
<div id="div2" onClick="active3d('div2');" class="main">
  <h1>Perspective (<span id="test_value">500px</span>)</h1>
  <div class="sub div1">DIV1</div>
  <div class="sub div2">DIV2</div>
  <div class="sub div3">DIV3</div>
  <div class="sub div4">DIV4</div>
  <div class="sub div5">DIV5</div>
</div>

<div id="div3" class="main">
  <h1>Perspective (<span id="test2_value">500px</span>)</h1>
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

<div id="settings" class="main">
<h1>Perspective settings</h1>
<input id="min" type="number" value="150" onchange="perspective('mm')">
<input id="max" type="number" value="1000" onchange="perspective('mm')">
<input id="perspective" type="range" min="150" max="1000" value="500" onchange="perspective('r')">
</div>

CSS

.main {
  position: relative;
  display:inline-flex;
  height: 150px;
  width: 150px;
  margin:10px;
  padding:10px;
  border: 1px solid blue;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: center;
  cursor:pointer;
  vertical-align: middle;
}
.main h1{
  position:absolute;
  top:10px;
  left:10px;
  margin:0;
  padding:0;
  font-size: small;
}
#div1 {
  perspective: 150px;
}
#div2 {
  perspective: 1500px;
}
/*rétegek*/
.sub {
  display:flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  background: rgba(100,100,100,.5);
  transform-style: preserve-3d;
  transition:all 1s ease;
  width: 120px;
  height: 20px;
}
.active .div1 {
  transform: rotateX(45deg);
}
.active .div2 {
  transform: rotateX(45deg) translateZ(30px);
}
.active .div3 {
  transform: rotateX(45deg) translateZ(60px);
}
.active .div4 {
  transform: rotateX(45deg) translateZ(90px);
}
.active .div5 {
  transform: rotateX(45deg) translateZ(120px);
}
/*kocka*/
#div3 {
  perspective: 1500px;
}
.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: rgba(100,100,100,.5);
  border: 1px solid black;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
/*beállítás*/

#settings {
  flex-direction:column;
}
#settings input {
  display:inline-block;
  width: 120px;
  max-width: 120px;
  margin:10px;
}

JavaScript

var frames={};
function active3d(div){
  var frame = document.getElementById(div);
  if(frames[div]==true){
  	frame.classList.remove("active");
    frames[div]=false;
  }else{
  	frame.classList.add("active");
    frames[div]=true;
  }
}
function perspective(e){
	if(e=="mm"){
  	var min = document.getElementById('min').value;
  	var max = document.getElementById('max').value;
    document.getElementById("perspective").min = min;
    document.getElementById("perspective").max = max;
  }
  var perspective = document.getElementById('perspective').value+"px";
  document.getElementById('test_value').innerHTML=perspective;
  document.getElementById('test2_value').innerHTML=perspective;
	document.getElementById('div2').style.perspective = perspective;
	document.getElementById('div3').style.perspective = perspective;
}