<div class="contenedor">
        <h1>Transformaciones 3D</h1>
        <h3>(con <em>perspective: 600px;</em>)</h3>
        <hr>
        <div class="elemento">
            <div class="box"><div class="caja" id="fuente">
                Elemento primario, sin transformar
            </div></div>

            <div class="box"><div class="caja" id="objetivo">
            </div></div>
        </div>
        <hr>
        <div class="acciones">
            <input type="button" id="idActualiza" name="nmAactualiza"
                   value="Actualizar" onClick="location.reload(true);">

            <input type="button" id="idRotaYIzq" name="nmRotaYIzq" value="Rota Y-Izq">
            <input type="button" id="idRotaYDer" name="nmRotaYDer" value="Rota Y-Der">
            <input type="button" id="idRotaXsup" name="nmRotaXsup" value="Rota X-Sup">
            <input type="button" id="idRotaXinf" name="nmRotaXinf" value="Rota X-Inf">
            <input type="button" id="idRotaZIzq" name="nmRotaZIzq" value="Rota Z-Izq">
            <input type="button" id="idRotaZDer" name="nmRotaZDer" value="Rota Z-Der">            
            <input type="button" id="idRota3D"   name="nmRota3D"   value="Rota 3D">  

            <input type="button" id="idTrasladaYSup" name="nmTrasladaYSup" value="Traslada Y-Sup">
            <input type="button" id="idTrasladaYInf" name="nmTrasladaYInf" value="Traslada Y-Inf">
            <input type="button" id="idTrasladaXIzq" name="nmTrasladaXIzq" value="Traslada X-Izq">
            <input type="button" id="idTrasladaXDer" name="nmTrasladaXDer" value="Traslada X-Der">
            <input type="button" id="idTrasladaZDis" name="nmTrasladaZDis" value="Traslada Z-Dis">
            <input type="button" id="idTrasladaZAum" name="nmTrasladaZAum" value="Traslada Z-Aum">
            <input type="button" id="idTraslada3D"   name="nmTraslada3D"   value="Traslada 3D">

            <input type="button" id="idEscalaY" name="nmEscalaY" value="Escala Y">
            <input type="button" id="idEscalaX" name="nmEscalaX" value="Escala X">
            <input type="button" id="idEscalaZtrans" name="nmEscalaZtrans" value="Escala Z TrasladaZ">

        </div>
    </div>
:root {
  --lado: 200px;
}
* {
  margin     : 0; padding: 0;
  box-sizing : border-box;
}
html {
  font             : 16px sans-serif;
  background-color : steelblue;
}
body {
  min-height : 100vh;
  display    : flex;
}
h1,h3 { text-align: center; margin: 0.4em ;}
.contenedor {
  max-width        : 90vw;
  margin           : auto;
  background-color : hsla(0, 0%, 0%, 0.1);
}
.elemento, .acciones {
  display          : flex;
  flex-wrap        : wrap;
  justify-content  : center;
  
}
.elemento { background-color: hsla(0, 0%, 0%, 0.1); }
input { 
  margin  : 1em 0.5em 1em 0;
  padding : 5px 10px;
}
input:nth-child(1) { margin-left: 0.5em; }
#idActualiza { 
  background-color : hsla(0, 50%, 50%, 1);
  color            : #fff;
}
.box {
  width       : var(--lado);
  height      : var(--lado);
  margin      : calc((var(--lado)/5) + 1em);
  border      : 1px solid #000;
  position    : relative;
  perspective : 600px;
}

hr {
  border      : 0;
  border-top  : 1px dashed #fff;
}
.caja {
  width      : 100%;
  height     : 100%;
  background : hsla(34, 44%, 69%, 0.6);
  padding    : 0.5em;
  outline    : 1px solid transparent;  /* elimina dientes de sierra en Firefox */
  transition : all 2s;
  position   : relative;
}

/* Clase par funciones de transformación */
.rotaYI       { transform: rotateY(-60deg);  }
.rotaYD       { transform: rotateY(+60deg);  }
.rotaXS       { transform: rotateX(-45deg);  }
.rotaXI       { transform: rotateX(+45deg);  }
.rotaZI       { transform: rotateZ(-15deg);  }
.rotaZD       { transform: rotateZ(+15deg);  }
.rota3D       { transform: rotate3d(1,1,1,+35deg); background: hsla(0, 44%, 69%, 0.6); }

.trasladaYS    { transform: translateY(-50px); }
.trasladaYI    { transform: translateY(+50px); }
.trasladaXI    { transform: translateX(-50px); }
.trasladaXD    { transform: translateX(+50px); }
.trasladaZD    { transform: translateZ(-150px); }
.trasladaZA    { transform: translateZ(+150px); }
.traslada3D    { transform: translate3d(75px,25px,50px); background: hsla(0, 44%, 69%, 0.6); }

.escalaY     { transform: scaleY(0.6);   }
.escalaX     { transform: scaleX(1.4);   }
.escalaZtras { transform: scaleZ(8) translateZ(-50px); }

#objetivo.rotaYI::before       { content: "rotateY(-60deg)"; }
#objetivo.rotaYD::before       { content: "rotateY(+60deg)"; }
#objetivo.rotaXS::before       { content: "rotateX(-45deg)"; }
#objetivo.rotaXI::before       { content: "rotateX(+45deg)"; }
#objetivo.rotaZI::before       { content: "rotateZ(-15deg)"; }
#objetivo.rotaZD::before       { content: "rotateZ(+15deg)"; }
#objetivo.rota3D::before       { content: "rotate3d(1,1,1,+35deg)"; }

#objetivo.trasladaYS::before   { content: "translateY(-50px)"; }
#objetivo.trasladaYI::before   { content: "translateY(+50px)"; }
#objetivo.trasladaXI::before   { content: "translateX(-50px)"; }
#objetivo.trasladaXD::before   { content: "translateX(+50px)"; }
#objetivo.trasladaZD::before   { content: "translateZ(-150px)"; }
#objetivo.trasladaZA::before   { content: "translateZ(+150px)"; }
#objetivo.traslada3D::before   { content: "translate3d(75px,25px,50px)"; }

#objetivo.escalaY::before     { content: "scaleY(0.6)"; }
#objetivo.escalaX::before     { content: "scaleX(1.4)"; }
#objetivo.escalaZtras::before { content: "scaleZ(8) translateZ(-50px)"; }

/* ejes */
.box::before {
  content    : "y-";
  width      : 1px;
  height     : 120%;
  position   : absolute;
  top        : -10%; left: 50%;
  background : lightblue;
  z-index    : 1;
  color      : #333;
}
.box::after {
  content    : "x-";
  width      : 120%;
  height     : 1px;
  position   : absolute;
  top        : 50%; left: -10%;
  background : lightblue;
  z-index    : 1;
  color      : #333;
}
/* centro de objeto primario */
.caja::after {
  content       : "";
  width         : 5px;
  height        : 5px;
  border-radius : 50%;
  background    : #333;
  position      : absolute;
  top           : 49%; left: 49%;
  z-index       : 2;
}
document.addEventListener('DOMContentLoaded',function(){
  var boton  = document.getElementsByTagName('input');
  var objeto = document.getElementById('objetivo');
  boton[1].addEventListener('click',function(){ objeto.classList.toggle('rotaYI'); });
  boton[2].addEventListener('click',function(){ objeto.classList.toggle('rotaYD'); });
  boton[3].addEventListener('click',function(){ objeto.classList.toggle('rotaXS'); });
  boton[4].addEventListener('click',function(){ objeto.classList.toggle('rotaXI'); });
  boton[5].addEventListener('click',function(){ objeto.classList.toggle('rotaZI'); });
  boton[6].addEventListener('click',function(){ objeto.classList.toggle('rotaZD'); });
  boton[7].addEventListener('click',function(){ objeto.classList.toggle('rota3D'); });
  boton[8].addEventListener('click',function(){ objeto.classList.toggle('trasladaYS'); });
  boton[9].addEventListener('click',function(){ objeto.classList.toggle('trasladaYI'); });
  boton[10].addEventListener('click',function(){ objeto.classList.toggle('trasladaXI'); });
  boton[11].addEventListener('click',function(){ objeto.classList.toggle('trasladaXD'); });
  boton[12].addEventListener('click',function(){ objeto.classList.toggle('trasladaZD'); });
  boton[13].addEventListener('click',function(){ objeto.classList.toggle('trasladaZA'); });  
  boton[14].addEventListener('click',function(){ objeto.classList.toggle('traslada3D'); });  
  boton[15].addEventListener('click',function(){ objeto.classList.toggle('escalaY'); });
  boton[16].addEventListener('click',function(){ objeto.classList.toggle('escalaX'); });
  boton[17].addEventListener('click',function(){ objeto.classList.toggle('escalaZtras'); });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.