变换元素以匹配平板电脑渲染的视角
Transform Element to Match Perspective of Tablet Render
我正在尝试让一个元素与 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
Is this possible using CSS?
绝对可以通过 CSS 仅使用您建议的方法来完成；但是，正如您可能已经注意到的那样，这并不是一项非常有益的任务。
Would I need to use something like canvas to properly match it up?
Canvas 可能有点矫枉过正；但是，SVG 形状就可以了。
我的建议是打开任何图像编辑软件（或在线找到适合您需要的简单软件）并抓取屏幕四个边缘的坐标 iPad 从你的照片。使用 polygon SVG 元素 绘制叠加层。
从技术上讲，您也可以使用 纯 CSS 和带有 CSS 属性 的普通 div 元素来做到这一点clip-path 设置为正确的坐标，但 SVG 似乎更具语义并且目前有更好的浏览器支持。
我正在尝试让一个元素与 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
Is this possible using CSS?
绝对可以通过 CSS 仅使用您建议的方法来完成；但是，正如您可能已经注意到的那样，这并不是一项非常有益的任务。
Would I need to use something like canvas to properly match it up?
Canvas 可能有点矫枉过正；但是，SVG 形状就可以了。
我的建议是打开任何图像编辑软件（或在线找到适合您需要的简单软件）并抓取屏幕四个边缘的坐标 iPad 从你的照片。使用 polygon SVG 元素 绘制叠加层。
从技术上讲，您也可以使用 纯 CSS 和带有 CSS 属性 的普通 div 元素来做到这一点clip-path 设置为正确的坐标，但 SVG 似乎更具语义并且目前有更好的浏览器支持。