TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un widget de cubo giratorio CSS?

3

CSS es una bestia, especialmente cuando estás en una fase de aprendizaje, es divertido practicar diferentes propiedades. Es interesante jugar con las propiedades de animación de CSS webkit para crear animaciones atractivas para su sitio. En este artículo crearemos un widget de cubo giratorio CSS simple utilizando fotogramas clave.

Relacionado: Tutorial HTML para principiantes.

¿Qué es el cubo giratorio?

El cubo giratorio se verá a continuación.

Puede mostrar texto o imágenes en seis caras del cubo y controlar la velocidad de rotación para que los espectadores puedan entender durante la rotación. Por ejemplo, puede usar las imágenes de sus productos para exhibirlas en la página de la tienda con cada imagen enlazada a la página del producto correspondiente.

Componentes del widget

El widget tiene dos componentes: CSS y HTML. Se recomienda colocar la parte CSS dentro de la sección de encabezado de la página web y la parte HTML dentro del cuerpo.

1 CSS para el widget

A continuación se muestra el CSS para el widget de cubo giratorio. Primero definimos un cuadro, agregamos seis lados y rotamos el cuadro con la animación de fotogramas clave de webkit.

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

2 HTML para el widget

A continuación se muestra el código HTML del widget, debe reemplazar las imágenes con sus propias URL de imagen.

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

Personalización del widget

Puede personalizar el widget según sus necesidades y a continuación se muestran algunas opciones:

  • El tamaño del cuadro se usa como 250x250px y el translateZ se usa con la mitad del ancho como 125px. Si desea cambiar el tamaño de la caja, asegúrese de cambiar ambos parámetros en consecuencia.
  • Asegúrese de utilizar las imágenes que tengan las mismas dimensiones que las de la caja. En este ejemplo, hemos utilizado imágenes de 250x250px en todos los lados de la caja. También puede utilizar cualquier texto en lugar de una imagen o una combinación de texto / imagen en diferentes caras.
  • La velocidad de rotación se define como 6 segundos en CSS como "-webkit-animation-duration: 6s;". Puede aumentar o disminuir la velocidad de rotación según sus necesidades.
  • Utilice los valores de porcentaje de animación de fotogramas clave para cambiar la velocidad de transformación.
  • La posición del cuadro se define usando estilo en línea en código HTML como 350px de ancho, 250px de alto y 180px de margen. Puede ajustar estos valores para colocar el cubo correctamente en su página web.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More