I. Project Background
With the emergence and development of HTML5 CSS3, our web pages can achieve more complex effects, but also make our browsing experience more rich, so today we will make a cube 3D effect.
【 II. Project Analysis 】
Want to use CSS3 to achieve 3D cube, it is clear that the cube is composed of six sides, divided into up and down left and right and front and back, considering these can help us better integrate into CSS3 code.
So I set up six divs as the six faces of the cube. For positioning reasons, all the boxes were initially facing the screen side, so each side had to be given a different value, i.e., a different position to display it.
[III. Tools needed]
Adobe Dreamweaver
Iv. Project Objectives
3 to achieve the L cube rotation, mouse move up to achieve the zoom effect.
V. Project Realization
1. Open Adobe Dreamweaver and create an HTML document. Change the title to “3D Cube”.
2. In the body tag, create a div box and give it the class attribute. Inside the outer div, create six divs representing the six sides of the cube and also give them the class attribute.
<body>
<div class="box">
<div class="box2">
<div class="box-2">top</div>
<div class="box-2">btm</div>
<div class="box-2">left</div>
<div class="box-2">right</div>
<div class="box-2">face</div>
<div class="box-2">back</div>
</div>
</div>
</body>
Copy the code3. Create CSS styles
<style type="text/css"> .box { width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transition: all 2s; transform-style: preserve-3d; transform: rotateX(15deg) rotateY(-15deg); }. Box :hover {transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5); } .box .box-2 { width: 100px; height: 100px; text-align: center; line-height: 100px; The font - size: 1.2 em. position: absolute; top: 0; left: 0; }.box. Box-2 :nth-child(1) {/* small cube first side */ background: rgba(225,0,0,0.5); transform: rotateX(90deg) translateZ(50px); # Angle offset}.box. Box -2:nth-child(2) {/* small cube second side */ background: rgba(255,255,0,0.5); transform: rotateX(-90deg) translateZ(50px); }.box. Box -2:nth-child(3) {/* small cube third side */ background: rgba(225,0,255,0.5); transform: rotateY(-90deg) translateZ(50px); }.box. Box -2:nth-child(4) {/* small cube 4 */ background: rgba(0,255,0,0.5); transform: rotateY(90deg) translateZ(50px); }.box. Box -2:nth-child(5) {/* cube # 5 */ background: rgba(225,0,0,0.5); transform: translateZ(50px); }.box. Box -2:nth-child(6) {/* cube # 6 */ background: rgba(0,0,255,0.5); transform: rotateY(180deg) translateZ(50px); } </style> </head> <body> <div class="box"> <div class="box2"> <div class="box-2">top</div> <div class="box-2">btm</div> <div class="box-2">left</div> <div class="box-2">right</div> <div class="box-2">face</div> <div class="box-2">back</div> </div> </div> </body> </html>Copy the codeMethod description:
RotateX () method
With the rotateX() method, the element is rotated around its X-axis by a given degree.
RotateY rotate ()
With the rotateY() method, the element is rotated around its Y-axis by a given degree.
Rotate rotateZ ()
With the rotateZ() method, the element is rotated around its z-axis by a given degree.
The following table shows the meanings of some attributes:
4, run to see the effect; Click F12 to run.
5. The effect is shown in the figure below.
You can see that the effect is basically ok, but the mouse has no effect.
6, add mouse up zoom effect
.box:hover{transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5); } # scale is the scale multipleCopy the code7. Add a 3D cube to the outer layer to form a stacking effect
The body of code:
<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>
Copy the codeCSS style code
<style type="text/css"> .box .box-1{ width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 2em; position: absolute; top: 0; left: 0; }.box-1:nth-child(1){/* cube first side */ background: rgba(225,0,0,0.5); transform:rotateX(90deg) translateZ(100px); }.box-1:nth-child(2){/* cube # 2 */ background: rgba(255,255,0,0.5); transform:rotateX(-90deg) translateZ(100px); }.box-1:nth-child(3){/* cube 3 */ background: rgba(225,0,255,0.5); transform:rotateY(-90deg) translateZ(100px); }. The box. The box - 1: NTH - child (4) {/ * big cube fourth * / background: rgba (0255,0,0.5); transform:rotateY(90deg) translateZ(100px); }. The box. The box - 1: NTH - child (5) {/ * big cube surface 5 * / background: rgba (225,0,0,0.5); transform:translateZ(100px); }. The box. The box - 1: NTH - child (6) {/ * big cube face * 6 / background: rgba (0,0,255,0.5); transform:rotateY(180deg) translateZ(100px); } </style>Copy the code[VI. Effect Display]
1. Click “Run”, the effect is as shown below.
2. Move the mouse over the cube to show the zooming effect, as shown below.
【 VII. Summary 】
1, the whole effect to write out, or relatively simple, as long as understand the meaning of each command, the rest is to organize the logic.
2, welcome to actively try, sometimes see others to achieve it is very simple, but to their own hands to achieve, there will always be a variety of problems, do not be arrogant, often start, can understand more profound.
3, CSS style effects are more than these, there are more cool effects, worth everyone to learn.
There are many ways to achieve a 3D cube, but this is one of the simplest.
5, if you need the source of this article, please reply to the “cube” four words in the public background.
Have you learned anything after reading this article? Please share it with more people
Home of IT Sharing
Please reply in wechat background [Join group]
Learn more about Crawlers and data mining in Python at pdcfighting.com/