* { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; } body { display:grid; place-items:center; background-color:black; overflow:hidden; } .container { perspective:1000px; } .inner { --x-deg:-45deg; --y-deg:3deg; transform-style:preserve-3d; position:relative; display:grid; place-items:center; transform:rotateX(var(--x-deg)) rotateY(var(--y-deg)); } .element { width:200px; height:150px; background-color:hsl(40,80%,50%); position:absolute; box-shadow:inset 0 0 50px hsl(0,0%,0%); transform-origin:center; transition:350ms ease; }
更新时间:2022-06-27 01:59:30