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 !

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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