Home >Web Front-end >HTML Tutorial >3D conversion module in HTML and CSS
3D conversion module in HTML and CSS
- php中世界最好的语言Original
- 2018-03-13 11:45:401628browse
This time I will bring you the 3D conversion module in HTML and CSS. What are the things to note when using the 3D conversion module in HTML and CSS? The following is a practical case, let’s take a look. The img tags in the article have all been changed to macdown format
1. What are 2D and 3D
1.What 2D and 3D
2D is a plane, with only width and height, and no thickness
3D is a three-dimensional body, with width, height, and thickness By default, all elements are rendered 2D display
2. How to make an element appear in 3D
Same as perspective, if you want to see the 3D effect of an element, you only need to add a transform- to its parent element. style attribute, and then set it to preserve-3d
3.Transform-style value:
flat: default value, two-dimensional;
preserve-3d:3D Effect;<html lang="en"> <head> <meta charset="UTF-8"> <title>106-3D转换模块</title> <style>
*{ margin: 0; padding: 0; }
.father{ width: 200px; height: 200px;
background-color: red; border: 1px solid #000; margin: 100px auto;
perspective: 500px; transform-style: preserve-3d;
transform: rotateY(0deg);
} .son{ width: 100px; height: 100px; background-color: blue; border: 1px solid #000; margin: 0 auto; margin-top: 50px; transform: rotateY(45deg); } </style> </head> <body> <p class="father"> <p class="son"></p> </p> </body> </html>2. Cube (with defects, there is a problem with the text display on the page)
<html lang="en"> <head> <meta charset="UTF-8"> <title>107-3D转换模块-正方体</title> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0; } ul li:nth-child(1){ background-color: red; transform: translateX(-100px) rotateY(90deg); } ul li:nth-child(2){ background-color: green; transform: translateX(100px) rotateY(90deg); } ul li:nth-child(3){ background-color: blue; transform: translateY(-100px) rotateX(90deg); } ul li:nth-child(4){ background-color: yellow; transform: translateY(100px) rotateX(90deg); } ul li:nth-child(5){ background-color: purple; transform: translateZ(-100px); } ul li:nth-child(6){ background-color: pink; transform: translateZ(100px); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
## Cube (with defects, for understanding only)
3. Cube (ultimate solution)
<html lang="en"> <head> <meta charset="UTF-8"> <title>108-3D转换模块-正方体终极</title> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 100px auto; position: relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; left: 0; top: 0; }
ul li:nth-child(1){ background-color: red; transform: rotateX(90deg) translateZ(100px); }
ul li:nth-child(2){ background-color: green; transform: rotateX(180deg) translateZ(100px); } ul li:nth-child(3){ background-color: blue; transform: rotateX(270deg) translateZ(100px); } ul li:nth-child(4){ background-color: yellow; transform: rotateX(360deg) translateZ(100px); } ul li:nth-child(5){ background-color: purple; transform: translateX(-100px) rotateY(90deg); } ul li:nth-child(6){ background-color: pink; transform: translateX(100px) rotateY(90deg); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
##I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website! 
Recommended reading:
2D conversion module in HTML and CSS
The above is the detailed content of 3D conversion module in HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!