Home > Article > Web Front-end > CSS drawing fantasy effect: achieving 3D rotating cube effect
CSS drawing fantasy effect: achieving 3D rotating cube effect
- 王林Original
- 2023-10-19 08:55:01728browse
CSS drawing fantasy effects: achieving 3D rotating cube effect
In web development, we often need to use CSS to achieve various fantasy effects, and one of them is very A popular effect is the 3D rotating cube effect. We can easily achieve this effect through the 3D transformation property of CSS. Below, I will introduce in detail how to use CSS to implement a 3D rotating cube and provide specific code examples.
First, we need an HTML structure to host our cube. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D旋转立方体</title>
<style>
.container {
width: 200px;
height: 200px;
perspective: 1000px;
perspective-origin: 50% 50%;
margin: 0 auto;
}
.cube-wrapper {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.face {
width: 200px;
height: 200px;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="cube-wrapper">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>In the above code, we use the transform property of CSS to realize the rotation and position adjustment of the cube. First, we created an external container (.container) and set the perspective (perspective) attribute and the perspective origin (perspective-origin) attribute , these two properties are used to control the 3D effect of the cube. Then, inside the container, we created a cube wrapping layer (.cube-wrapper) and set the transform-style: preserve-3d; attribute, which is used to create A new 3D rendering context that enables 3D transformation of internal elements. Next, we created 6 faces (.face) and used different transform properties to determine their position and rotation angle.
Finally, we added a @keyframes animation to continuously change the rotation angle of the cube so that it can continue to rotate.
By analyzing the above code, we can see that it is not difficult to achieve a 3D rotating cube effect. It only requires some basic CSS properties and some simple animation effects.
Of course, this is just a basic example, you can make more complex adjustments and extensions according to your own needs. For example, you can add a different background image to each side, use gradient colors to create a three-dimensional effect, add text or icons, and more. As long as you use your imagination, this 3D rotating cube effect can become even more stunning.
In summary, by using the 3D transformation property of CSS, we can easily achieve a 3D rotating cube effect. The above is a basic implementation example. I hope it can provide you with some ideas and inspiration for achieving fantastic effects in web development. Give full play to your creativity and create more stunning effects!
The above is the detailed content of CSS drawing fantasy effect: achieving 3D rotating cube effect. For more information, please follow other related articles on the PHP Chinese website!