<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 150px; width: 150px; margin: 50px; padding:10px; border: 1px solid black; -webkit-perspective:60; /* Safari and Chrome */ -webkit-perspective-origin: center center; /* Safari 和 Chrome */ } #div2 { padding:50px; position: absolute; border: 1px solid black; background-color: yellow; -webkit-transform: rotateX(30deg); /* Safari and Chrome */ } #div3 { padding:50px; position: absolute; border: 1px solid black; background-color: green; -webkit-transform: rotateX(10deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"> <div id="div2">HELLO</div> <div id="div3">HELLO</div> </div> </body> </html>
perspective 可以控制用户与元素3d 空间中 Z 平面的距离
了解 工作生活心情记忆 的更多信息
Subscribe to get the latest posts sent to your email.