3d转换模块
-
含义:元素有宽度、高度和厚度
-
启动:在父元素中加入属性transform-style:preserve-3d;即可呈现3d效果
-
正方体做法<!--保证所有的面转到正面都是正方向的-->:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正方体</title> <style> *{ margin: 0; padding: 0; } ul{ width: 200px; height: 200px; box-sizing: border-box; border: 1px solid #000; position: relative; left: 0; top: 0; margin: 0 auto; margin-top: 100px; transform: rotateX(-30deg) rotateY(-30deg); transform-style: preserve-3d; } ul li{ list-style: none; width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 50px; 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: purple; transform: rotateX(360deg) translateZ(100px); } ul li:nth-child(5){ background-color: pink; transform: rotateY(90deg) translateZ(100px); } ul li:nth-child(6){ background-color: yellow; transform: rotateY(270deg) 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>