您如何设计这个 3D 转换后的底座以使其具有“深度”而不仅仅是高度和宽度？
(注意在底部的圆 Angular 处，有一些大约 3-5 像素的灰色“深度”)
这是我的 CSS 现在的样子:
.dock{
transform: matrix3d(1,0,0.00,0,0.00,1,0.00,-0.0015,0,0,1,0,0,0,0,1);
width:800px;
height:80px;
perspective: 300px;
opacity:0.8;
position:fixed;
bottom:20px;
left:50%;
margin-left: -400px;
border-radius:5px;
background: -webkit-linear-gradient(grey, white);
}
非常感谢您的帮助!
编辑:非常感谢您的帮助。不到 5 分钟就搞定了。太棒了!
最佳答案
transform: perspective(200px) rotateX(45deg); 应该可以完成这项工作。您可能想要更改这些值。
如果你想将多个节点变换到同一个消失点，你应该阅读perspective-css-property。
这里有一个关于这个主题的很好的介绍:https://css-tricks.com/almanac/properties/p/perspective/
关于javascript - CSS - 如何让 Mac OSX 停靠在 CSS 中？除了高度或宽度之外，还有第三个参数吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38282681/