<div class="contenedor">
        <h1>Transformaciones 2D</h1>
        <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="nmactualiza"
                   value="Actualizar" onClick="location.reload(true);">

            <input type="button" id="idRotaIzq" name="nmRotaIzq" value="Rota Izq">
            <input type="button" id="idRotaDer" name="nmRotaDer" value="Rota Der">

            <input type="button" id="idTrasladaIzq" name="nmTrasladaIzq" value="Traslada Izq">
            <input type="button" id="idTrasladaDer" name="nmTrasladaDer" value="Traslada Der">

            <input type="button" id="idEscalaMas"   name="nmEscalaMas" value="Escala Más">
            <input type="button" id="idEscalaMenos" name="nmEscalaMenos" value="Escala Menos">

            <input type="button" id="idDeformaX" name="nmDeformaX" value="Deforma X">
            <input type="button" id="idDeformaY" name="nmDeformaY" value="Deforma Y">
        </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 { text-align: center; margin: 0.5em; }
.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;
}

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;
  border: 20px solid transparent;
  border-top-color: hsla(0, 100%, 50%, 0.4);
  border-right-color: hsla(120, 100%, 20%, 0.4);
  border-bottom-color: hsla(240, 100%, 50%, 0.4);
  border-left-color: hsla(60, 100%, 50%, 0.4);  
  position: relative;
}

/* Clase par funciones de transformación */
.rotaI       { transform: rotate(-60deg);  }
.rotaD       { transform: rotate(+60deg); }
.trasladaI   { transform: translate(-50px); }
.trasladaD   { transform: translate(+50px); }
.escalaMas   { transform: scale(1.2); }
.escalaMenos { transform: scale(0.8); }
.deformaX    { transform: skewX(30deg); }
.deformaY    { transform: skewY(20deg); }

#objetivo.rotaI::before       { content: "rotate(-60deg)"; }
#objetivo.rotaD::before       { content: "rotate(+60deg)"; }
#objetivo.trasladaI::before   { content: "translate(-50px)"; }
#objetivo.trasladaD::before   { content: "translate(+50px)"; }
#objetivo.escalaMas::before   { content: "scale(1.2)"; }
#objetivo.escalaMenos::before { content: "scale(0.8)"; }
#objetivo.deformaX::before    { content: "skewX(30deg)"; }
#objetivo.deformaY::before    { content: "skewY(20deg)"; }

/* ejes */
.box::before {
  content: "y-";
  width: 1px;
  height: 120%;
  position: absolute;
  top: -10%; left: 50%;
  background: lightblue;
  z-index: 1;
}
.box::after {
  content: "x-";
  width: 120%;
  height: 1px;
  position: absolute;
  top: 50%; left: -10%;
  background: lightblue;
  z-index: 1;
}
/* 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('rotaI'); });
  boton[2].addEventListener('click',function(){ objeto.classList.toggle('rotaD'); });
  boton[3].addEventListener('click',function(){ objeto.classList.toggle('trasladaI'); });
  boton[4].addEventListener('click',function(){ objeto.classList.toggle('trasladaD'); });
  boton[5].addEventListener('click',function(){ objeto.classList.toggle('escalaMas'); });
  boton[6].addEventListener('click',function(){ objeto.classList.toggle('escalaMenos'); });
  boton[7].addEventListener('click',function(){ objeto.classList.toggle('deformaX'); });
  boton[8].addEventListener('click',function(){ objeto.classList.toggle('deformaY'); });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.