Sun. Dec 8th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

Tutoriel HTML-CSS : Carrousel 3D CSS3

1 min read

7 thoughts on “Tutoriel HTML-CSS : Carrousel 3D CSS3

  1. Salut Jeremy,
    tuto excellent par contre est-il possible de bloquer l'animation et de mettre des bouton pour le faire tourner manuellement ? car je vais m'en servir comme un menu merci d'avance

  2. #allPlan > .p1{ -webkit-transform: translateZ(200px);}
    #allPlan > .p2{ -webkit-transform: rotateY(45deg) translateZ(200px);}
    #allPlan > .p3{ -webkit-transform: rotateY(90deg) translateZ(200px);}
    #allPlan > .p4{ -webkit-transform: rotateY(135deg) translateZ(200px);}
    #allPlan > .p5{ -webkit-transform: rotateY(180deg) translateZ(200px);}

  3. css #wrapper{
    width:600px;
    -webkit-perspective: 800;

    }

    #allPlan{
    width: 300px;
    height: 200px;
    margin: 0 auto;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: Caroussel 10s infinite linear;
    }

    .plan{
    position:absolute;
    height: 200px;
    width: 200px;
    text-align:center;
    font-size: 8em;
    color:#FFF;
    background-color: rgba(0, 0, 0, 0.7);
    }
    @-webkit-keyframes Caroussel{
    From { -webkit-transform: rotateY(0);}
    to { -webkit-transform: rotateY(360deg);}
    }

  4. Hi, i can not do it works
    why?
    html
    *{
    margin:0px;
    padding:0px;
    border:0px;
    font-family: arial;
    color:#BDBDBD;
    }
    div#body{

    margin-top:0px;
    width:100%;
    height:800px;
    background-color:white;
    }

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.