PHOTOS PLUG IN 02

Coller ce code dans : Définir un code CSS associé à votre élémént HTML
                                                    
                                                    .scene {
                                                      -webkit-perspective: 800px;
                                                              perspective: 800px;
                                                      display: -webkit-box;
                                                      display: flex;
                                                      -webkit-box-align: center;
                                                              align-items: center;
                                                      -webkit-box-pack: center;
                                                              justify-content: center;
                                                      height: 100%;
                                                      width: 100%;
                                                      background: url("");
                                                      background-size: 100% 100%;
                                                      background-position: center;
                                                      background-repeat: no-repeat;
                                                    }
                                                    .scene:hover {
                                                      -webkit-transform: scale(1.2);
                                                              transform: scale(1.2);
                                                    }
                                                    .scene:hover .side {
                                                      opacity: 1;
                                                    }
                                                    
                                                    .cube {
                                                      -webkit-transform-style: preserve-3d;
                                                              transform-style: preserve-3d;
                                                      position: relative;
                                                      width: 300px;
                                                      height: 300px;
                                                      -webkit-animation: rotate 10s ease-in-out infinite;
                                                              animation: rotate 10s ease-in-out infinite;
                                                      -webkit-transform-origin: center center;
                                                              transform-origin: center center;
                                                    }
                                                    
                                                    .side {
                                                      position: absolute;
                                                      width: 300px;
                                                      height: 300px;
                                                      background-color: #333;
                                                      opacity: .95;
                                                      background-size: cover;
                                                      background-repeat: no-repeat;
                                                    }
                                                    
                                                    .back {
                                                      -webkit-transform: translateZ(-150px) rotateX(180deg);
                                                              transform: translateZ(-150px) rotateX(180deg);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto01.jpg");
                                                    }
                                                    
                                                    .left {
                                                      -webkit-transform: translateX(-150px) rotateY(90deg);
                                                              transform: translateX(-150px) rotateY(90deg);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto02.jpg");
                                                    }
                                                    
                                                    .right {
                                                      -webkit-transform: translateX(150px) rotateY(90deg);
                                                              transform: translateX(150px) rotateY(90deg);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto03.jpg");
                                                    }
                                                    
                                                    .top {
                                                      -webkit-transform: translateY(-150px) rotateX(90deg);
                                                              transform: translateY(-150px) rotateX(90deg);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto04.jpg");
                                                    }
                                                    
                                                    .bottom {
                                                      -webkit-transform: translateY(150px) rotateX(270deg);
                                                              transform: translateY(150px) rotateX(270deg);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto05.jpg");
                                                    }
                                                    
                                                    .front {
                                                      -webkit-transform: translateZ(150px);
                                                              transform: translateZ(150px);
                                                      background-image: url("https://wa-fusion.fr/wa_res/images/normal/CubePhoto06.jpg");
                                                    }
                                                    
                                                    @-webkit-keyframes rotate {
                                                      0% {
                                                        -webkit-transform: rotateX(0);
                                                                transform: rotateX(0);
                                                      }
                                                      12.5% {
                                                        -webkit-transform: rotateY(90deg);
                                                                transform: rotateY(90deg);
                                                      }
                                                      25% {
                                                        -webkit-transform: rotateY(270deg);
                                                                transform: rotateY(270deg);
                                                      }
                                                      37.5% {
                                                        -webkit-transform: rotateY(270deg);
                                                                transform: rotateY(270deg);
                                                      }
                                                      50% {
                                                        -webkit-transform: rotateY(360deg);
                                                                transform: rotateY(360deg);
                                                      }
                                                      62.5% {
                                                        -webkit-transform: rotateX(90deg);
                                                                transform: rotateX(90deg);
                                                      }
                                                      75% {
                                                        -webkit-transform: rotateX(180deg);
                                                                transform: rotateX(180deg);
                                                      }
                                                      87.5% {
                                                        -webkit-transform: rotateX(270deg);
                                                                transform: rotateX(270deg);
                                                      }
                                                      100% {
                                                        -webkit-transform: rotateX(360deg);
                                                                transform: rotateX(360deg);
                                                      }
                                                    }
                                                    
                                                    @keyframes rotate {
                                                      0% {
                                                        -webkit-transform: rotateX(0);
                                                                transform: rotateX(0);
                                                      }
                                                      12.5% {
                                                        -webkit-transform: rotateY(90deg);
                                                                transform: rotateY(90deg);
                                                      }
                                                      25% {
                                                        -webkit-transform: rotateY(270deg);
                                                                transform: rotateY(270deg);
                                                      }
                                                      37.5% {
                                                        -webkit-transform: rotateY(270deg);
                                                                transform: rotateY(270deg);
                                                      }
                                                      50% {
                                                        -webkit-transform: rotateY(360deg);
                                                                transform: rotateY(360deg);
                                                      }
                                                      62.5% {
                                                        -webkit-transform: rotateX(90deg);
                                                                transform: rotateX(90deg);
                                                      }
                                                      75% {
                                                        -webkit-transform: rotateX(180deg);
                                                                transform: rotateX(180deg);
                                                      }
                                                      87.5% {
                                                        -webkit-transform: rotateX(270deg);
                                                                transform: rotateX(270deg);
                                                      }
                                                      100% {
                                                        -webkit-transform: rotateX(360deg);
                                                                transform: rotateX(360deg);
                                                      }
                                                    }
Tutoriels vidéo

Plugins Photos Page 02

10 Carrousel "ligne de temps"

11 - Slider Cube Effet Zoom

12 - Effet 3D + Mouvement survol

Soutenez mon travail.
