• Si tiene un overflow:hidden; en el DIV no se mostraría la sombra que se hace con el before
• margin:30px 0 0 40px; arriba derecha abajo izquierda
• backface-visibility:visible; Con esta propiedad definimos que cuando se rote más de 90 grados se vea la parte trasera
• transform:perspective(200px) rotateX(20deg); Le da la perspectiva de que esta en 3 dimensiones, es decir de que tan lejos estoy viendo algo que gira, hace como que crecen las cosas cuando se acercan y se achican cuando se alejan
• transform-origin:left; El punto de giro lo pone del lado izquierdo, se le pueden poner porcentajes
• translateZ(120px); Movimiento en el eje Z, es diferente ponerlo antes o después del rotate
• backface-visibility:hidden; se pone invisible cuando da la vuelta
• Si se pone el translate despues de la rotación, lo que hace es que rota y le decimos que tan lejos debe trasladarse. Si el translate se pone antes gira sobre si mismo en la translación, como elm movimiento de la tierra. Ver el Giro3DInv

Cubo

• El DIV vuelta se rota a 90deg y se mandadel lado derecho con un
• left:100px; ya que el div padre mide 200
• Se rota el padre en Y de forma negativa con un perspective de 800px para que se vea de lejos
• transform-style:preserve-3d; Se le pone a la caja padre
• transition-duration:0.5s; a la cja padre para darle tiempo a la rotación
• translateZ(-100px); en la vuelta para que se traslade en el eje z y se vea el cambio
• transform-origin:left center; en la caja padre para que rote del lado izquierdo
• box-shadow:inset 0px 2px 20px black; Frente sombrado de 0px vertical 2px horizontal 20px difuminado negro