Effets d'image Web faits à la main en Css3 pur-tutoriel CSS-php.cn

Passez la souris, l'image pivotera à 360 degrés

Effet :

Code :
```
<style>
```
Copier après la connexion
Copier après la connexion
```
        .rotate-demo {
```
Copier après la connexion
```
            width: 220px;
```
Copier après la connexion
```
            height: 220px;
```
Copier après la connexion
```
            margin: 0 auto;
```
Copier après la connexion
```
            background: no-repeat url("images/author.jpg") left top;
```
Copier après la connexion
```
            -webkit-background-size: 220px 220px;
```
Copier après la connexion
```
            -moz-background-size: 220px 220px;
```
Copier après la connexion
```
            background-size: 220px 220px;
```
Copier après la connexion
```
            -webkit-border-radius: 110px;
```
Copier après la connexion
```
            border-radius: 110px;
```
Copier après la connexion
```
            -webkit-transition: -webkit-transform 2s ease-out;
```
Copier après la connexion
```
            -moz-transition: -moz-transform 2s ease-out;
```
Copier après la connexion
```
            -o-transition: -o-transform 2s ease-out;
```
Copier après la connexion
```
            -ms-transition: -ms-transform 2s ease-out;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
            .rotate-demo:hover {
```
Copier après la connexion
```
                -webkit-transform: rotateZ(360deg);
```
Copier après la connexion
```
                -moz-transform: rotateZ(360deg);
```
Copier après la connexion
```
                -o-transform: rotateZ(360deg);
```
Copier après la connexion
```
                -ms-transform: rotateZ(360deg);
```
Copier après la connexion
```
                transform: rotateZ(360deg);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
    </style>
```
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```

```
Copier après la connexion
Point de connaissance : l'attribut de transformation de CSS3 peut appliquer la 2D ou conversion 3D. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. Définissez sur rotateZ(angle) pour implémenter la rotation 3D des éléments DOM le long de l'axe Z. Les paramètres associés incluent rotation, rotation3d, rotationX et rotationY.
Survolez l'image pour l'agrandir

Effet :

Code :
```
CSS3：
```
Copier après la connexion
```
<style type="text/css">
```
Copier après la connexion
```
    .img-container {
```
Copier après la connexion
```
        background-color: #000;
```
Copier après la connexion
```
        width: 220px;
```
Copier après la connexion
```
        height: 220px;
```
Copier après la connexion
```
        margin: 20px 50px;
```
Copier après la connexion
```
    }
```
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
    .img {
```
Copier après la connexion
```
        -webkit-transform: scale(0.6);
```
Copier après la connexion
```
        -moz-transform: scale(0.6);
```
Copier après la connexion
```
        -o-transform: scale(0.6);
```
Copier après la connexion
```
        -webkit-transition-duration: 0.5s;
```
Copier après la connexion
```
        -moz-transition-duration: 0.5s;
```
Copier après la connexion
```
        -o-transition-duration: 0.5s;
```
Copier après la connexion
```
    }
```
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
        .img img {
```
Copier après la connexion
```
            padding: 1px;
```
Copier après la connexion
```
            border-radius: 10px;
```
Copier après la connexion
```
            border: 1px solid #fff;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
        .img:hover {
```
Copier après la connexion
```
            -webkit-transform: scale(0.8);
```
Copier après la connexion
```
            -webkit-box-shadow: 0px 0px 30px #ccc;
```
Copier après la connexion
```
            -moz-transform: scale(0.8);
```
Copier après la connexion
```
            -moz-box-shadow: 0px 0px 30px #ccc;
```
Copier après la connexion
```
            -o-transform: scale(0.8);
```
Copier après la connexion
```
            -o-box-shadow: 0px 0px 30px #ccc;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
</style>
```
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
HTML：
```
Copier après la connexion
```

```
Copier après la connexion
```
            
```
Copier après la connexion
```
                <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
```
Copier après la connexion
```
            
```
Copier après la connexion
```
        
```
Copier après la connexion
Copier après la connexion
Point de connaissance : utilisez également l'attribut transform de CSS3, définissez scale(x,y) et implémentez Conversion de mise à l'échelle DOM 2D des éléments, liée à scale3d, scaleX, scaleY, scaleZ
réalisation d'un album de rotation d'image 3D

effet :

Code :
```
CSS:
```
Copier après la connexion
```
<style>
```
Copier après la connexion
Copier après la connexion
```
        .carousel-container {
```
Copier après la connexion
```
            margin: 20px auto;
```
Copier après la connexion
```
            width: 210px;
```
Copier après la connexion
```
            height: 140px;
```
Copier après la connexion
```
            position: relative;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
        #carousel {
```
Copier après la connexion
```
            width: 100%;
```
Copier après la connexion
```
            height: 100%;
```
Copier après la connexion
```
            position: absolute;
```
Copier après la connexion
```
            transform-style: preserve-3d;
```
Copier après la connexion
```
            animation: rotation 20s infinite linear;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
            #carousel:hover {
```
Copier après la connexion
```
                animation-play-state: paused;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
            #carousel figure {
```
Copier après la connexion
```
                display: block;
```
Copier après la connexion
```
                position: absolute;
```
Copier après la connexion
```
                width: 186px;
```
Copier après la connexion
```
                height: 116px;
```
Copier après la connexion
```
                left: 10px;
```
Copier après la connexion
```
                top: 10px;
```
Copier après la connexion
```
                background: black;
```
Copier après la connexion
```
                overflow: hidden;
```
Copier après la connexion
```
                border: solid 1px black;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(1) {
```
Copier après la connexion
```
                    transform: rotateY(0deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(2) {
```
Copier après la connexion
```
                    transform: rotateY(40deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(3) {
```
Copier après la connexion
```
                    transform: rotateY(80deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(4) {
```
Copier après la connexion
```
                    transform: rotateY(120deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(5) {
```
Copier après la connexion
```
                    transform: rotateY(160deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(6) {
```
Copier après la connexion
```
                    transform: rotateY(200deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(7) {
```
Copier après la connexion
```
                    transform: rotateY(240deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(8) {
```
Copier après la connexion
```
                    transform: rotateY(280deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel figure:nth-child(9) {
```
Copier après la connexion
```
                    transform: rotateY(320deg) translateZ(288px);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
            #carousel .carousel-img {
```
Copier après la connexion
```
                -webkit-filter: grayscale(1);
```
Copier après la connexion
```
                cursor: pointer;
```
Copier après la connexion
```
                transition: all .5s ease;
```
Copier après la connexion
```
                border: none;
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
                #carousel .carousel-img:hover {
```
Copier après la connexion
```
                    -webkit-filter: grayscale(0);
```
Copier après la connexion
```
                    transform: scale(1.2,1.2);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
        @keyframes rotation {
```
Copier après la connexion
```
            from {
```
Copier après la connexion
```
                transform: rotateY(0deg);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
            to {
```
Copier après la connexion
```
                transform: rotateY(360deg);
```
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
    </style>
```
Copier après la connexion
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```
HTML:
```
Copier après la connexion
 
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
```

```
Copier après la connexion
```
        
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
```
Copier après la connexion
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
```
Copier après la connexion
```
        
```
Copier après la connexion
Copier après la connexion
```
    
```
Copier après la connexion
Point de connaissance : toujours s'appuyer sur l'attribut transform de CSS3 et l'attribut d'animation, utilisez rotateY pour définir la rotation 3D de l'élément le long de l'axe Y et utilisez translateZ pour définir la transformation 3D de l'élément le long de l'axe Z
En même temps, définissez l'attribut d'animation de l'élément ; pour obtenir l'effet d'animation, qui est défini dans cet article comme suit :
```
animation: rotation 20s infinite linear;
```
Copier après la connexion
nom de l'animation (nom de l'image clé qui doit être lié au sélecteur) : Animation de rotation
durée de l'animation (le temps nécessaire pour terminer l'animation) : 20 s
nombre d'itérations d'animation ( le nombre de fois que l'animation doit être jouée) : infini (temps illimités)
animation-timing-function (animation Speed curve) : linéaire (la vitesse de l'animation est la même du début à la fin)

Pour des effets d'image de page Web CSS3 plus purs faits à la main, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Effets d'image Web faits à la main en Css3 pur

Passez la souris, l'image pivotera à 360 degrés

Survolez l'image pour l'agrandir

réalisation d'un album de rotation d'image 3D