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

Tema: animacion para girar un cubo!!!

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    19 jul, 19
    Mensajes
    4
    Poder de Reputación
    0

    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;https://myip.kim/ https://birthdaywishes.onl/ https://elecpay.in/tneb/

    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);
    }
    Última edición por JainJude; 28/07/2019 a las 19:01

Temas Similares

  1. Duda con Modernizr para navegadores sin animación!
    Por joemon en el foro Todo sobre Estilos CSS
    Respuestas: 0
    Último Mensaje: 11/06/2019, 13:09
  2. Página web: Cubo de Rubik
    Por lapergola34union en el foro Foro General
    Respuestas: 0
    Último Mensaje: 24/05/2018, 16:47
  3. animacion para girar un cubo
    Por suso30 en el foro Todo sobre Estilos CSS
    Respuestas: 3
    Último Mensaje: 11/07/2014, 03:56
  4. 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
  •