JMiur [E]

El cubo 3D generado sólo con CSS es un experimento de fofronline que aprovecha las propiedades -moz-transform de Fire­fox 3.5 y -webkit-transform de Safari así que sólo es visible en esos navegadores.

Deberían ver algo así.

Me adelanto .. no, no creo que tenga demasiada aplicación practica.

Esta es la cara superior del cubo ... y sólo contiene un texto de prueba ... el viejo Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Esta es la cara izquierda

Con textos formateados con diferentes etiquetas y estilos.

Sed diam nonummy nibh euismod tincidunt

Esta es la cara derecha y aqui puse un texto y una imagen

Este es el esquema del código HTML:
<div class="cube">
<div class="topFace">
<div> ... el contenido de la cara superior ... </div>
</div>
<div class="leftFace"> ... el contenido de la cara izquierda ... </div>
<div class="rightFace"> ... el contenido de la cara derecha ... </div>
</div>
Y estas las propiedades CSS elementales:
.cube {
height: 480px;
left: 150px;
position: relative;
top: 200px;
width: 600px;
}
.rightFace,.leftFace,.topFace div {
padding: 10px;
height: 180px;
width: 180px;
}
.rightFace,.leftFace,.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #9AB;
}
.rightFace {
-moz-transform: skewY(-30deg);
-webkit-transform: skewY(-30deg);
background-color: #89A;
left: 200px;
}
.topFace div {
-moz-transform: skewY(-30deg) scaleY(1.16);
-webkit-transform: skewY(-30deg) scaleY(1.16);
background-color: #ABC;
}
.topFace {
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
left: 100px;
top: -158px;
}

17 comentarios:

Anónimo  

Jajaa que pasada!! pues es muy original el efecto, en Safari no lo he podido comprobar por que el otro día lo quité, me "capturó" todos los marcadores de Mozilla Firefox y en Mozilla no me dejaba abrir ninguno :X

Salu2!!

Responder
Unknown  

y yo que se Jmiur, tal vez cambiando las medidas, colores para una entrada...hacer volar la imaginación me cuesta poco ;)...eso sí aplicarla en el blog me cuesta muchooooooo jajaja
Buen Jueves y nos vemos cuando nos veamos...adioshhhhhhhhh

Responder
EM2.0  

Bueno pero queda original, mi casa está llena de cosas que no tiene aplicación práctica :D Lo que no me ha quedado claro es donde dejas alojado el cubo, en la sidebar??.

Responder
EM2.0  

Acabo de caer queda alojado donde yo quiera depende de donde elija incluir el div, verdad??

Responder
Jorge Verón Schenone  

Interesante, si bien se aparta del estandard. Estamos en un momento de desarrollo web muy activo, el HTML5 es un claro ejemplo. Cuántos cambios ! :). Abrazo, Jorge

Responder
JMiur  

Espineli: Se ven Safari y en Firefox, en el resto, se ven cosas rarísimas :D

Graciela: Sólo es un jueguito :D

Dña.Urraca: Exacto, se muestra donde ubiques el DIV.

Jorge: Es verdad eso, se vienen tiempos interesantes :D

Responder
Sailor  

JMiur pasaba por aqui sólo como siempre por toda la información que nos proporcionas. He aprendido mucho aqui en tu sitio Vagabundia.
Has ayudado a resolver una serie de códigos que yo no entendía, pero lo que más agradezco y valoro es tu profesionalismo.
Mucha gente escribe en la web y coloca los códigos incompletos, con errores.
Tu eres uno de los mejores al igual que la maravillosa Rosa del Escaparate.

Muchas gracias por tu ayuda de siempre!!
Abrazos miles!!!

Responder
Jugada Preparada  

Se ve perfecto en el Chrome!!!

Esta muy bueno!
Un Saludo

Danchovski

Responder
Admin  

Solo de curiosa ehh... Yo tengo un programa para editar fotos que hace el mismo efecto con una o varias fotos en los lados del cubo, el resultado de esa fusión si saldría en todos los navegadores no? Ya que es una imagen, supongo :o
Te pregunto por preguntar, tal como decís no le encuentro ninguna aplicación salvo algún adorno... no se...
Saludos ;)

Responder
Salvador  

¡Excelente!

¿Cómo se vería en IE? ¿No hay ninguna manera de hacer que se vea bien en ese navegador?

Responder
JMiur  

Sailor©: Muchas gracias por el comentario :$ Un abrazo.

Jugada Preparada: ¿Se ve bie? Debería porque usa el mismo sistema que safari pero, en el mio lo veo mal, seguramente debe ser que lo tengo desactualizado.

k_nelita: Ese tipo de programas seguramente crea un gif o alguna imagen animada así que ahí no hay problemas. Utlidad no tiene demasaida auqnue, depende de la imaginación de cada uno :D En realidad, sólo muestra que en los próximos años se vene cosas increibles :D

Salva: En IE ves tres rectángulos. Es que aún no tiene estas funciones que sólo son parte del futuro.

Responder
Angel Cba  

Orale que chido pondre uno en mi nuevo blog ya asta se que le pondre jajajaja, magnifico JMuir tu siempre adelante.

Responder
Unknown  

Está interesante, JMiur. Gracias ;)

Responder
par  

gracias me encanta tu blog muchas gracias

Responder
Eci si Cami  

Gracias .........me ayuda mucho tu blog...soy novato en bloger....
gracias gracias.....
saludos a todos !

Responder
Unknown  

podrian subir una web de ejemplo, porque la imagen no se aprecia el mismo... se agradece desde ya... saludos!

JMiur  

Hazlo y veremos de qué se trata o si se entiende el problema.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR