Reine handgefertigte CSS3-Webbildeffekte-CSS-Tutorial-php.cn

Bewegen Sie die Maus, das Bild wird um 360 Grad gedreht

Effekt:

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

```
Nach dem Login kopieren
Wissenspunkt: Das Transformationsattribut von CSS3 kann 2D anwenden oder 3D-Konvertierung. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Auf „rotateZ(angle)“ setzen, um die 3D-Rotation von DOM-Elementen entlang der Z-Achse zu implementieren. Zu den zugehörigen Einstellungen gehören „rotate“, „rotate3d“, „rotateX“ und „rotateY“.
Zum Vergrößern über das Bild fahren

Effekt:

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

```
Nach dem Login kopieren
```
            
```
Nach dem Login kopieren
```
                <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
```
Nach dem Login kopieren
```
            
```
Nach dem Login kopieren
```
        
```
Nach dem Login kopieren
Nach dem Login kopieren
Wissenspunkt: Verwenden Sie auch das Transformationsattribut von CSS3, legen Sie den Maßstab (x, y) fest und implementieren Sie ihn DOM 2D-Skalierungskonvertierung von Elementen, bezogen auf Scale3D, ScaleX, ScaleY, ScaleZ
Realisierung eines 3D-Bildrotationsalbums

Effekt:

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

```
Nach dem Login kopieren
```
        
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
```
Nach dem Login kopieren
```
        
```
Nach dem Login kopieren
Nach dem Login kopieren
```
    
```
Nach dem Login kopieren
Wissenspunkt: Verlassen Sie sich weiterhin auf das Transformationsattribut von CSS3 und Animationsattribut, verwenden Sie „rotateY“, um die 3D-Rotation des Elements entlang der Y-Achse zu definieren, und verwenden Sie „translateZ“, um die 3D-Transformation des Elements entlang der Z-Achse zu definieren.
Legen Sie gleichzeitig das Animationsattribut des Elements fest um den Animationseffekt zu erzielen, der in diesem Artikel wie folgt definiert ist:
```
animation: rotation 20s infinite linear;
```
Nach dem Login kopieren
animation-name (Keyframe-Name, der an den Selektor gebunden werden muss): Animation der Rotation
animation-duration (die Zeit, die zum Abschließen der Animation benötigt wird): 20s
animation-iteration-count ( die Häufigkeit, mit der die Animation abgespielt werden soll): unendlich (unbegrenzte Zeiten)
Animations-Timing-Funktion (Animationsgeschwindigkeitskurve): linear (die Geschwindigkeit der Animation ist von Anfang bis Ende gleich)

Für weitere handgefertigte CSS3-Webseiten-Bildeffekte beachten Sie bitte die PHP-Chinese-Website für verwandte Artikel!

Reine handgefertigte CSS3-Webbildeffekte

Bewegen Sie die Maus, das Bild wird um 360 Grad gedreht

Zum Vergrößern über das Bild fahren

Realisierung eines 3D-Bildrotationsalbums