Home >Web Front-end >JS Tutorial >How to use css3 to achieve 3D stereoscopic effects

How to use css3 to achieve 3D stereoscopic effects

php中世界最好的语言Original: 2018-03-14 14:56:071798browse

This time I will show you how to use css3 to achieve 3D three-dimensional special effects. What are the precautions for using css3 to achieve 3D three-dimensional special effects? The following is a practical case, let’s take a look.

In fact, CSS3 provides a lot of tools that allow us to achieve very cool things. Many special effects do not need to be achieved through complex JS code, but can be achieved through simple CSS3 code. This time I will introduce it to you. Let’s talk about the implementation of 3D box and animation.

To realize this legitimate body box, you need to have a basic understanding of the content of css3 and have the basic syntax in css. The main content in css3 is as follows:

Understand the properties of scale (scaling), rotation rotate, and translation translate in transform in CSS3.
Understand the implementation of animation in css3.
Understand the excessive special effects in css3.

The code in html is very simple. You only need to set six block elements. The most important and core part is the code in css3. I will implement the code as follows, For specific implementation, I will add comments in the code.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    html{        background: radial-gradient(ellipse at center, #2A2A2A 0%, #000000 100%);        width: 100%;        height:100%;    }    .sence{        width: 600px;        height:600px;        position: fixed;        top: 0;        left:0;        right:0;        bottom:0;        margin: auto;    }    .box{        width: 300px;        height:300px;        position: relative;        transform-style: preserve-3d;        transform-origin: center center 75px;        /*允许改变转换元素的位置*/        animation:  myfirst 3s linear infinite ;        /*指的是匀速变化   并且原路返回*/alternate    }
    .box p{        width: 100%;        height:100%;        position: absolute;        top:0;        left:0;        border-radius: 5px;        transform-style: preserve-3d;        box-shadow: 0 0 30px 5px #fff;        opacity: 0.8;    }    @keyframes myfirst {        from {            transform:  skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);        }        to {            transform: skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateZ(90deg);        }    }    .box p:nth-child(1){        background-image: url(img/psbe5ZDRJYLJ.jpg);/*照片可以另行添加，也可以换成背景色*/        background-size: 300px 300px;        transform-origin: top;        transform: rotateX(90deg);    }    .box p:nth-child(2){        background-image: url(img/psbe7VL5XVBF.jpg);        background-size: 300px 300px;        transform-origin:left;        transform: rotateY(-90deg);    }    .box p:nth-child(3){     background-image: url(img/psbeL8Q5LRIN.jpg);     background-size: 300px 300px;    }    .box p:nth-child(4){        background-image: url(img/psbeNEXVJIFI.jpg);        background-size: 300px 300px;        transform-origin:right;        transform: rotateY(90deg);    }    .box p:nth-child(5){        background-image: url(img/psbeUIJ7FZJ6.jpg);        background-size: 300px 300px;        transform-origin: bottom;        transform: rotateX(-90deg);    }    .box p:nth-child(6){        background-image: url(img/psbR3FYMIPK.jpg);        background-size: 300px 300px;        transform: translateZ(300px);    }</style><body><p class="sence">    <p class="box">        <p>        </p>        <p>                 </p>        <p>                    </p>        <p>                   </p>        <p>        </p>        <p>                 </p>    </p></p></body></html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use css3 to achieve 3D stereoscopic effects

Related articles