CSS3 achieves cool 3D rotation perspective effect

CSS3 achieves cool 3D rotation perspective

3D animation effects are becoming more and more popular and have been widely used on various platforms, such as Alibaba Cloud, Huawei Cloud, webpack official website, etc. It can more realistically display our products and introductions, bringing a strong visual impact. Therefore, in order to make yourself better, css3 3D animation is essential.

What You Will Learn

• Introduction to common APIs for CSS3 3D transformations
• CSS3 3D Application Scenarios
• CSS3 3D realizes a cube
  

start

1. Introduction to common APIs for CSS3 3D transformations

First, let's take a look at the CSS 3D coordinate system:

Next we introduce several commonly used APIs:

Rotation

• rotateX()
• rotateY()
• rotateZ() The above APIs represent rotation around the x, y, and z axes respectively. The following example is an example of rotation around the x axis:

The relevant code is as follows:

<style>
.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    /* Specifies how nested elements are rendered in 3D space */
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: 150px 150px 150px;
}

.rotateX {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: rotateX 6s infinite;
}

@keyframes rotateX {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(360deg);
    } 
}
</style>
<div class="d3-wrap">
    <div class="rotateX"></div>
</div>

Transform

• translateX(x) defines a 3D translation, using only the value for the X axis
• translateY(y) defines a 3D translation, using only the value for the Y axis
• translateZ(z) defines 3D transformation, using only the value for the Z axis. The above APIs represent displacements relative to the x, y, and z axes, respectively. The following example shows displacements along the z axis:

What we need to note here is that in order to see the effect of displacement, we need to add the following properties to the parent container:

.d3-wrap {
    transform-style: preserve-3d;
    perspective: 500;
    /* Set the view where the element is viewed */
    -webkit-perspective: 500;
}

When you define the perspective property for an element, its child elements gain the perspective effect, not the element itself. The code is as follows:

.d3-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    perspective: 500;
    -webkit-perspective: 500;
    transform: rotateX(0) rotateY(45deg);
    transform-origin: center center;
}

.transformZ {
    width: 200px;
    height: 200px;
    background-color: #06c;
    transition: transform 2s;
    animation: transformZ 6s infinite;
}

@keyframes transformZ {
    0% {
        transform: translateZ(100px);
    }
    100% {
        transform: translateZ(0);
    } 
}

3D Zoom

• scaleX(x) gives a 3D scaling transformation value along the X axis
• scaleY(x) gives a 3D scaling transformation value on the Y axis
• scaleZ(x) gives a 3D scaling transformation value of the Z axis. The scaling settings are similar to the above, so I won’t go into details here.
  

Theoretically, the above three common transformations are enough. It is worth noting that if we want to make the elements present 3D effects, the following APIs that cannot be ignored are also very important:

2. CSS3 3D Application Scenarios

CSS 3D is mainly used in website interaction and model effects, such as:

3D Carousel
3D Product Introduction Indoor 3D Simulation
h5 3D activity page, a typical example is Taobao’s year-end summary H5
3D data visualization
In fact, if you are familiar with CSS 3D, some basic 3D models can be drawn using CSS.

3. CSS3 3D realizes a cube

The core idea is to use 6 faces to splice, and adjust their positions by setting rotate and translate, as follows:

The specific code is as follows:

.container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 120px auto;
    transform-style: preserve-3d;
    /* To make it more three-dimensional*/
    transform: rotateX(-30deg) rotateY(45deg);
    transform-origin: 150px 150px 150px;
    animation: rotate 6s infinite;
}
.container .page {
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: #fff;
    background-size: cover;
}
.container .page:first-child {
    background-image: url(./my.jpeg);
    background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
    transform: rotateX(90deg);
    transform-origin: 0 0;
    transition: transform 10s;
    background-color: rgba(179, 15, 64, 0.6);
    background-image: url(./my2.jpeg);
}

.container .page:nth-child(3) {
    transform: translateZ(300px);
    background-color: rgba(22, 160, 137, 0.7);
    background-image: url(./my3.jpeg);
}

.container .page:nth-child(4) {
    transform: rotateX(-90deg);
    transform-origin: -300px 300px;
    background-color: rgba(210, 212, 56, 0.2);
    background-image: url(./my4.jpeg);
}
.container .page:nth-child(5) {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    background-color: rgba(201, 23, 23, 0.6);
    background-image: url(./my5.jpeg);
}
.container .page:nth-child(6) {
    transform: rotateY(-90deg) translateZ(-300px);
    transform-origin: 0 300px;
    background-color: rgba(16, 149, 182, 0.2);
    background-image: url(./my6.jpeg);
}

HTML structure

<div class="container">
    <div class="page">A</div>
    <div class="page">B</div>
    <div class="page">C</div>
    <div class="page">D</div>
    <div class="page">E</div>
    <div class="page">F</div>
</div>

Summarize

The above is the editor's introduction to the cool 3D rotation perspective effect achieved with CSS3. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!