<div class="caja">
    <div class="elemento"></div>
  </div>
  <div class="info">
    <h1>CSS 3D: rotateY(360deg)</h1>    
    <input type="button" id="idActualiza" name="nmAactualiza" value="Actualizar" onClick="location.reload(true);">
  </div>

:root {
  --lado: 200px;
}

html {
  font: 16px sans-serif;
  background: steelblue;
}

body {
  min-height: 95vh;
  display: flex;
}

.caja {
  width: var(--lado);
  height: var(--lado);
  margin: auto;
  border: 1px solid hsla(0, 100%, 0%, 0.6);
  perspective: 800px;
  position: relative;
  z-index: 10;
}
.caja::before {
  content: "";
  width: 130%;
  height: 0;
  position: absolute;
  top: 50%;
  left: -15%;
  border: 1px solid hsla(0, 100%, 0%, 0.6);
  z-index: -1;
}
.caja::after {
  content: "";
  width: 0;
  height: 130%;
  position: absolute;
  top: -15%;
  left: 50%;
  border: 1px solid hsla(0, 100%, 0%, 0.6);
  z-index: -1;
}
.elemento {
  width: 100%;
  height: 100%;
  background: hsla(60,100%,50%,0.5);
  outline: 1px solid transparent;
  animation: mover 1s linear 2s;
}
input { padding: 1em; }
.info {
  position: absolute;
  top: 0.5em;left: 0.5em;  
}
@keyframes mover {
    0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}