转换元素以匹配平板电脑渲染的视角

Question

我试图让一个元素与iPad渲染的视角相匹配，但我能做到的最好的就是 - iPad with misaligned element

使用transform: rotateX(67.5deg) rotateY(4.3deg) rotateZ(47.3deg) skew(12.4deg, -4deg) translate(-15px, 88px)

我知道必须有一种方法可以正确对齐它，但我似乎无法得到它。 这可能是使用CSS还是我需要使用像canvas这样的东西来正确匹配它？

这是我正在处理的Codepen - https://codepen.io/JackT2/pen/oePmpX

Answer 1

  

这可以使用CSS吗？

绝对可以通过CSS使用你建议的方法来做到这一点;但是，正如您可能已经注意到的那样，这不是一项非常有益的任务。

  

我是否需要使用像帆布这样的东西来正确匹配它？

画布可能是一种过度杀伤力;但是，SVG形状可以做得很好。

我的建议是打开任何图像编辑软件（或在网上找到一个符合您需求的简单版本），并从图片中抓取iPad屏幕四边的坐标。使用 polygon SVG元素绘制叠加层。

从技术上讲，您也可以使用纯CSS 和普通的div元素来完成此操作，并将CSS属性clip-path设置为正确的坐标，但SVG似乎更具语义性目前有更好的浏览器支持。