變換元件以匹配片的透視渲染

Question

我試圖讓一個元素的角度匹配渲染的iPad不過，我可以做到最好的就是這一點 - iPad with misaligned element

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

我知道必須有一種正確對齊的方式，但我似乎無法得到它。 這是可能使用CSS或我需要使用類似畫布的東西來正確匹配它？

這是我Codepen是我的工作 - https://codepen.io/JackT2/pen/oePmpX

Answer 1

這可能使用CSS？

絕對有可能通過CSS使用您建議的方法;但是，正如你可能已經注意到的那樣，這不是一個非常有價值的任務。

我需要使用類似畫布的東西來正確匹配它嗎？

畫布可能是一種矯枉過正;然而，一個SVG形狀可以做得很好。

---

我的建議是打開任何圖像編輯軟件（或找到適合您的需要一個簡單的在線）和搶座標的iPad從您的圖片在屏幕的四個邊的。使用polygon SVG元素繪製覆蓋圖。

從技術上講，你也可以用純CSS，並與CSS屬性clip-path設置爲正確的座標普通div元素做到這一點，但一個SVG似乎更多的語義，並具有目前更好的瀏覽器支持。