Implementation of CSS3 3D cool cube transformation animation
|
I love coding, it makes me happy! Hello everyone, I am Counter. In this chapter, Weibo mainly uses some new features of CSS3. Key frames are mainly used to make 3D graphics move, which involves some abstract ideas and three-dimensional imagination. Let me show you the finished effect first. The code is not difficult, and each line of code is commented in detail. It is pure CSS, without JS. CSS3 is good. The effect is as follows:
There are comments on each line, so I won't repeat them. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3D Rotation</title>
<style>
/* Set the depth of field for the outermost parent to give the elements inside a three-dimensional space, and set the width and height*/
.wrapper {
/* Depth of field 600 pixels */
perspective: 500px;
/* Set the margin distance to 100px on the top, adaptive on the left and right, and 0 on the bottom */
margin: 100px auto 0;
width: 200px;
height: 200px;
/* border: 1px solid black; */
}
.box {
/* Set relative positioning so that child elements are positioned relative to themselves*/
position: relative;
/* Set the item to retain the 3D effect. If the element is not set, the 3D effect will not be displayed*/
transform-style: preserve-3d;
width: 200px;
height: 200px;
/* move is the key frame set, movement for 8 seconds, uniform motion, infinite times (the meaning of each parameter) */
animation: move 8s linear infinite;
}
/* Select all elements that start with item and position them all to the location of their parent*/
div[class^="item"] {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
/* Align the text left and right */
text-align: center;
/* Align the text vertically */
line-height: 200px;
}
/* The cube has six sides, each item1~6 represents each side, and item1~6 inside has three axes, x, y, z */
/* The x-axis is the width of your computer screen, from left to right. The y-axis is the axis of the height of your computer screen, from top to bottom. The z-axis is the axis from your eyes looking vertically at the computer screen, and the direction is from the computer screen to your eyes*/
/* Set the first side */
.item1 {
/* Move 100px along the z-axis towards your eye */
transform: translateZ(100px);
/* Set the background color, the last parameter is the transparency set to 0.6 */
background-color: rgba(255, 0, 0, 0.6);
}
/* Set up the second side */
.item2 {
/* Moving 100px inward along the z-axis is -100px */
transform: translateZ(-100px);
background-color: rgba(72, 42, 245, 0.6);
}
/* Set the third side */
.item3 {
/* Rotate 90 degrees along the x-axis, then move 100px along the z-axis (deg here means degree) */
transform: rotateX(90deg) translateZ(100px);
background-color: rgba(217, 230, 36, 0.6);
}
/* Set the fourth side */
.item4 {
/* Rotate 90 degrees along the x-axis, then move -100px along the z-axis */
transform: rotateX(90deg) translateZ(-100px);
background-color: rgba(58, 7, 51, 0.6);
}
/* Set the fifth side */
.item5 {
/* Rotate 90 degrees along the y-axis, then move -100px along the z-axis */
transform: rotateY(90deg) translateZ(-100px);
background-color: rgba(241, 142, 75, 0.6);
}
/* Set the sixth side */
.item6 {
/* Rotate 90 degrees along the y-axis, then move 100px along the z-axis */
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(125, 178, 238, 0.6);
}
/* Set keyframes to rotate the box container, rotating 360 degrees from 0 along the x, y, and z axes respectively*/
@keyframes move {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Data URI and MHTML complete solution for all browsers
>>: Analysis and solution of the problem that MySQL instance cannot be started
Recommend
Realizing tree-shaped secondary tables based on angular
First look at the effect: Code: 1.html <div cl...
Detailed explanation of the process of deploying the distributed configuration center Apollo with one click using docker compose
Introduction When talking about distribution, we ...
Some common properties of CSS
CSS background: background:#00ffee; //Set the back...
Code for aligning form checkbox and radio text
Alignment issues like type="radio" and t...
CSS uses radial-gradient to implement coupon styles
This article will introduce how to use radial-gra...
How to use physics engine joints in CocosCreator
Table of contents mousejoint mouse joint distance...
Goodbye Docker: How to Transform to Containerd in 5 Minutes
Docker is a very popular container technology. Th...
Detailed tutorial on Tomcat installation and deployment in Windows 10
Table of contents 1 Java environment configuratio...
4 ways to modify MySQL root password (summary)
Method 1: Use the SET PASSWORD command First log ...
Implementation of MySQL multi-version concurrency control MVCC
Transaction isolation level settings set global t...
Detailed graphic explanation of how to install and completely delete MySQL by decompression
1. Install MySQL (1) Unzip the downloaded MySQL c...
Detailed explanation of Mysql's method of optimizing order by statement
In this article, we will learn about the optimiza...
MySQL Series 3 Basics
Table of contents Tutorial Series 1. Introduction...
A performance bug about MySQL partition tables
Table of contents 2. Stack analysis using pt-pmap...
Mini Program Recording Function Implementation
Preface In the process of developing a mini progr...