Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Pure Css3 hand-made web page image effects

Pure Css3 hand-made web page image effects

高洛峰

Release： 2017-02-09 16:41:37

Original

1679 people have browsed it

Hover the mouse and the image will rotate 360 degrees

Effect:

Code:

<style>

Copy after login

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

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

 <br>

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

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

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

 <br>

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

Copy after login

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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
```
<p class="img-container">
```
Copy after login
```
            <p class="img">
```
Copy after login
```
                <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
```
Copy after login
```
            </p>
```
Copy after login
```
        </p>
```
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
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
<br>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
```
<p class="carousel-container">
```
Copy after login
```
        <p id="carousel">
```
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
```
        </p>
```
Copy after login
Copy after login
```
    </p>
```
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!

Related labels：

css css3

source：php.cn

Previous article：The hidden space position relationship of div Next article：css unit summary

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

Latest Articles by Author

Examples of html settings for bold, italic, underline, strikethrough and other font effects

1970-01-01 08:00:00
Implement a Java version of Redis

1970-01-01 08:00:00
The simplest WeChat applet Demo

1970-01-01 08:00:00
Introduction to simple operation methods of pandas.DataFrame (create, index, add and delete) in python

1970-01-01 08:00:00
WeChat Mini Program: Example of how to implement tabs effect

1970-01-01 08:00:00
Python constructs custom methods to beautify dictionary structure output

1970-01-01 08:00:00
HTML5: Use Canvas to process Video in real time

1970-01-01 08:00:00
Asp.net uses SignalR to send pictures

1970-01-01 08:00:00
WeChat Mini Program Development Tutorial-App() and Page() Function Overview

1970-01-01 08:00:00
Detailed explanation of how to use python redis

1970-01-01 08:00:00

Latest Issues

Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...

From 2024-04-01 20:42:38

0

1

259

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template