Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: animacion para girar un cubo

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    16 feb, 12
    Mensajes
    24
    Poder de Reputación
    12

    animacion para girar un cubo

    buenas de nuevo queria ver si alguien me puede ayudar a girar este cubo sobre su propio eje horizontalmente pero manteniendo la forma de rombo, es que ami se me va de un lado de lka pantalla a otra y no consigo la propiedad desde donde debe girar y siempre gira sobre una esquina(solo con css3 por favor)lo que tengo es esto:
    html:
    <div id="cubo">
    <div id="arriba"></div>
    <div id="abajo"></div>
    <div id="derecha"></div>
    <div id="izquierda"></div>
    <div id="atras"></div>
    <div id="delante"></div>
    </div>

    css:
    #cubo{transform-style:preserve-3d;margin:300px 300px;transform:perspective(7000px) rotatex(45deg) rotatey(45deg);}

    #cubo:hover{animation:animacion ease 2s forwards;}

    @keyframes animacion{
    0%{transform:rotatey(75deg);transform:rotatex(95de g);}
    25%{transform:rotatey(100deg);transform:rotatex(75 deg);}
    75%{transform:rotatey(200deg);transform:rotatex(50 deg);}
    100%{transform:rotatey(275deg);transform:rotatex(2 5deg);}

    }
    #arriba{position:absolute;background-color:green;width:200px;height:200px;
    transform:rotatex(90deg) translatez(100px);
    }

    #abajo{position:absolute;background-color:red;width:200px;height:200px;
    transform:rotatex(-90deg) translatez(100px);
    }

    #derecha{position:absolute;background-color:blue;width:200px;height:200px;
    transform:rotatey(90deg) translatez(100px);
    }

    #izquierda{position:absolute;background-color:yellow;width:200px;height:200px;
    transform:rotatey(-90deg) translatez(100px);
    }

    #atras{position:absolute;background-color:orange;width:200px;height:200px;
    transform:translatez(-100px);
    }

    #delante{position:absolute;background-color:black;width:200px;height:200px;
    transform:translatez(100px);
    }

  2. #2
    Recien Llegado! Merodeador
    Fecha de Ingreso
    18 sep, 13
    Ubicación
    Murcia
    Mensajes
    3
    Poder de Reputación
    0
    Yo hice un cubo similar hace algún tiempo, te dejo el enlace al articulo para que le eches un vistazo al código: transform y perspective

    Saludos!

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    16 feb, 12
    Mensajes
    24
    Poder de Reputación
    12
    gracias agustin al final puse una galeria fotografica pero me servira para otros proyectos

  4. #4
    Recien Llegado! Habitante
    Fecha de Ingreso
    11 jul, 14
    Ubicación
    Lima
    Mensajes
    23
    Poder de Reputación
    9
    Gracias por el artículo agustin, yo no buscaba un cubo pero si me sirvió gran parte del código.
    Diseño de Páginas Web Profesionales:
    Hostingroup - Hosting Peru

Temas Similares

  1. Duda con Modernizr para navegadores sin animación
    Por Lombardo en el foro Todo sobre Estilos CSS
    Respuestas: 1
    Último Mensaje: 06/05/2013, 14:43
  2. ANIMACION SWF
    Por krito09 en el foro Todo sobre Estilos CSS
    Respuestas: 5
    Último Mensaje: 12/05/2009, 18:32
  3. Animacion para pagina principal
    Por FRACTO en el foro Foro General
    Respuestas: 2
    Último Mensaje: 21/09/2007, 09:27

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •