level 1
KarlSmith十二
楼主
把下面的img标签里的background-color注释掉之后，preserve-3d就无效了
可是解除注释后，preserve-3d又可以了
这是什么原理？
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { perspective: 1000px; } section { margin: 0 auto; width: 1200px; height: 500px; transform-style: preserve-3d; } img { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; } img:nth-child(1) { /* background-color: purple; */ transform: translateZ(300px); } img:nth-child(2) { /* background-color: skyblue; */ transform: rotateY(60deg) translateZ(300px); } img:nth-child(3) { /* background-color: hotpink; */ transform: rotateY(120deg) translateZ(300px); } img:nth-child(4) { /* background-color: honeydew; */ transform: rotateY(180deg) translateZ(300px); } img:nth-child(5) { /* background-color: greenyellow; */ transform: rotateY(240deg) translateZ(300px); } img:nth-child(6) { /* background-color: orange; */ transform: rotateY(300deg) translateZ(300px); } </style></head><body> <section> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> </section></body></html>
2020年08月16日 10点08分
1
可是解除注释后，preserve-3d又可以了
这是什么原理？
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { perspective: 1000px; } section { margin: 0 auto; width: 1200px; height: 500px; transform-style: preserve-3d; } img { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; } img:nth-child(1) { /* background-color: purple; */ transform: translateZ(300px); } img:nth-child(2) { /* background-color: skyblue; */ transform: rotateY(60deg) translateZ(300px); } img:nth-child(3) { /* background-color: hotpink; */ transform: rotateY(120deg) translateZ(300px); } img:nth-child(4) { /* background-color: honeydew; */ transform: rotateY(180deg) translateZ(300px); } img:nth-child(5) { /* background-color: greenyellow; */ transform: rotateY(240deg) translateZ(300px); } img:nth-child(6) { /* background-color: orange; */ transform: rotateY(300deg) translateZ(300px); } </style></head><body> <section> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> <img src="./图片.jpg"></img> </section></body></html>
