JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<html>
<head>
    <title>3D Transforms</title>
<style>
.view {
    position:absolute; left:300; top:300;
    -webkit-perspective:800px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
}
.axis {
    font: 18pt helvetica bold;
    background: -webkit-linear-gradient(top left, #f0f0f0, rgba(0,0,0,0.5));
    position: absolute; left: -280px; top: 0px; width:500;
}
.face {
    background: -webkit-radial-gradient(white,beige 20%, beige 60%, black);
    border: 1px solid black;
    height:100px; width:100px;
    position:absolute; left:-80px; top:30px;
}
#top {
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform 1s;
}
.ball {
    position:absolute; left:-55px; top: 25px;
    height:50; width:50; border-radius:25;
    background: -webkit-radial-gradient(30 30, white, red 20%, black);
    -webkit-transform: translateZ(50px) rotateX(90deg) translateY(10px);
}
p { padding:28;}
</style>
<script type="text/javascript">
function setXY() {
    var xRot = document.getElementById("xSlide").value;
    var yRot = document.getElementById("ySlide").value;
    var tString="rotateX("+xRot+"deg) rotateY("+yRot+"deg)";
    document.getElementById("view").style.webkitTransform=tString;
}
function openBox() {
    document.getElementById('top').style.webkitTransform = 'translateY(-100px) rotateX(90deg)';
}
function closeBox() {
    document.getElementById('top').style.webkitTransform = 'translateY(-100px) rotateX(-90deg)';
}
</script>
</head>
 
<body onload="setXY();">
<h2>This page contains no images.</h2>
<div class="view" id="view">
    <div class="axis"> X Axis </div>
    <div class="axis" style="-webkit-transform: rotate(90deg);"> Y Axis </div>
    <div class="axis" style="-webkit-transform: rotateY(-90deg);"> Z Axis </div>
 
    <div class="face"><p>Back</p></div>
    <div class="face" style="-webkit-transform: translateZ(100px);">
         <p>Front</p></div>
    <div class="face"
         style="-webkit-transform:...

CSS

input[type="range"] {
    -webkit-appearance: none;
    background-color: black;
    height: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: -1px;
    z-index: 1;
    width: 11px;
    height: 11px;
    cursor: pointer;
    -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
}

input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: -75px;
}