Pure Css3 hand-made web page image effects-CSS Tutorial-php.cn

Table of Contents

Hover the mouse and the image will rotate 360 degrees

Hover the picture to enlarge it

Home

Web Front-end

CSS Tutorial

Pure Css3 hand-made web page image effects

高洛峰

Feb 09, 2017 pm 04:41 PM

css css3

Hover the mouse and the image will rotate 360 degrees

Effect:

Code:

<style>

Copy after login

        .rotate-demo {

Copy after login

            width: 220px;

Copy after login

            height: 220px;

Copy after login

            margin: 0 auto;

Copy after login

            background: no-repeat url("images/author.jpg") left top;

Copy after login

            -webkit-background-size: 220px 220px;

Copy after login

            -moz-background-size: 220px 220px;

Copy after login

            background-size: 220px 220px;

Copy after login

            -webkit-border-radius: 110px;

Copy after login

            border-radius: 110px;

Copy after login

            -webkit-transition: -webkit-transform 2s ease-out;

Copy after login

            -moz-transition: -moz-transform 2s ease-out;

Copy after login

            -o-transition: -o-transform 2s ease-out;

Copy after login

            -ms-transition: -ms-transform 2s ease-out;

Copy after login

 <br>

Copy after login

            .rotate-demo:hover {

Copy after login

                -webkit-transform: rotateZ(360deg);

Copy after login

                -moz-transform: rotateZ(360deg);

Copy after login

                -o-transform: rotateZ(360deg);

Copy after login

                -ms-transform: rotateZ(360deg);

Copy after login

                transform: rotateZ(360deg);

Copy after login

    </style>

Copy after login

 <br>

Copy after login

<p class="rotate-demo"></p>

Copy after login

Knowledge point: The transform property of CSS3 can apply 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element. Set to rotateZ(angle) to implement 3D rotation of DOM elements along the Z axis. Related settings include rotate, rotate3d, rotateX, and rotateY.

Hover the picture to enlarge it

Effect:

Code:

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

```
Copy after login
```
            
```
Copy after login
```
                <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
```
Copy after login
```
            
```
Copy after login
```
        
```
Copy after login
Copy after login
Knowledge Point: The transform attribute of CSS3 is also used, and scale(x,y) is set to realize the 2D scaling conversion of DOM elements. Related implementations include scale3d, scaleX, scaleY, and scaleZ
3D picture rotation album
Effect:

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

```
Copy after login
```
        
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
```
Copy after login
```
            <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
```
Copy after login
```
        
```
Copy after login
Copy after login
```
    
```
Copy after login
Knowledge point: Still With the transform attribute and animation attribute of CSS3, use rotateY to define the 3D rotation of the element along the Y axis, and use translateZ to define the 3D transformation of the element along the Z axis;
At the same time, set the animation attribute of the element to achieve animation effects, as defined in this article As follows:

##
```
animation: rotation 20s infinite linear;
```
Copy after login
animation-name (needs to be bound to the selector keyframe name): animation of rotation
animation-duration (the time it takes to complete the animation): 20s
animation-iteration-count (the number of times the animation should play): infinite (infinite times)
animation-timing -function (speed curve of the animation): linear (the speed of the animation is the same from beginning to end)

For more pure Css3 hand-made web page image effects, please pay attention to the PHP Chinese website for related articles!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7378

Java Tutorial

1628

CakePHP Tutorial

1357

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

The width of emsp spaces in HTML is inconsistent. How to reliably implement text indentation? Apr 04, 2025 pm 11:57 PM

Regarding the problem of inconsistent width of emsp spaces in HTML and Chinese characters in many web tutorials, it is mentioned that occupying the width of a Chinese character, but the actual situation is not...

How to implement a tight transition animation in React using react-transition-group? Apr 04, 2025 pm 11:27 PM

Using react-transition-group in React to achieve confusion about closely following transition animations. In React projects, many developers will choose to use react-transition-group library to...

How to achieve the effect of high input elements but high text at the bottom? Apr 04, 2025 pm 10:27 PM

How to achieve the height of the input element is very high but the text is located at the bottom. In front-end development, you often encounter some style adjustment requirements, such as setting a height...

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

How to select and style elements of the first specific class using CSS and JavaScript? Apr 04, 2025 pm 11:33 PM

How to select and style elements of the first specific class using CSS and JavaScript? In web development, you often encounter the need to select and modify specific classes...

How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter? Apr 04, 2025 pm 11:45 PM

How to achieve the 45-degree curve effect of segmenter? In the process of implementing the segmenter, how to make the right border turn into a 45-degree curve when clicking the left button, and the point...

How to achieve the gradient effect of CSS fonts? Apr 04, 2025 pm 10:12 PM

Implementing the CSS font gradient effect Many developers hope to achieve cool font gradient effect on web pages. This article will explain in detail how to use CSS3 to implement the graph...

How to accurately realize the small label effect in the design draft on the mobile terminal? Apr 04, 2025 pm 11:36 PM

How to achieve the effect of small labels in the design draft on the mobile terminal? When designing mobile applications, it is common to find out how to accurately restore the small label effect in the design draft...

See all articles

Pure Css3 hand-made web page image effects

Hover the mouse and the image will rotate 360 ​​degrees

Hover the picture to enlarge it

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics

Hover the mouse and the image will rotate 360 degrees