3D CSS block
<head>
<?php $width = 800; ?>
<?php $height = 100; ?>
<?php $depth = 400; ?>
<?php $half_depth = 200; ?>
<?php $trans_sides = $width/2; ?>
<?php $trans_front_back = $depth/2; ?>
<?php $trans_top_bottom = $height/2; ?>
<style>
.scene {
perspective: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.cube {
position:relative;
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
transform-style: preserve-3d;
transform:translateZ(-100px) rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}
.side {
position: absolute;
background-color: rgba(56,28,255,0.3);
top: 50%;
left: 50%;
}
.left {
transform: translate(calc(-50% - <?php echo $trans_sides; ?>px), -50%) rotateY(90deg);
width: <?php echo $depth; ?>px;
height: <?php echo $height; ?>px;
}
.right {
transform: translate(calc(-50% + <?php echo $trans_sides; ?>px), -50%) rotateY(90deg);
width: <?php echo $depth; ?>px;
height: <?php echo $height; ?>px;
}
.front {
transform: translate3d(-50%, -50%, <?php echo $trans_front_back; ?>px);
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
}
.back {
transform: translate3d(-50%, -50%, -<?php echo $trans_front_back; ?>px);
width: <?php echo $width; ?>px;
height: <?php echo $height; ?>px;
}
.top {
transform: translate(-50%, calc(-50% - <?php echo $trans_top_bottom; ?>px)) rotateX(90deg);
width: <?php echo $width; ?>px;
height: <?php echo $depth; ?>px;
}
.bottom {
transform: translate(-50%, calc(-50% + <?php echo $trans_top_bottom; ?>px)) rotateX(90deg);
width: <?php echo $width; ?>px;
height: <?php echo $depth; ?>px;
}
</style>
</head>
<body>
<div class="scene">
<div class="cube" id="cube_1">
<div class="side back"></div>
<div class="side left"></div>
<div class="side right"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side front"></div>
</div>
</div>
</body>