使用3D透視預覽打印Canvas包裝
[英]Print Canvas wrap with 3D perspective preview
1 個解決方案
解決方案1
0 2012-04-09 08:43:52
如果你想保持客戶端，你對IE9支持的要求基本上要求畫布方法。 您當然可以執行渲染服務器端和AJAX加載渲染后的圖像，這將在每個瀏覽器中都有效。
如果您決定可以轉儲小於10的IE版本（或者至少只顯示沒有轉換的普通照片，那么您可以使用CSS 3D轉換和CSS2剪輯的組合來執行環繞效果。類似於：
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
為了打破這種局面，我們已經加載了用戶的圖像並將其放入頁面，同時將div與相同的圖像設置為背景。 該div設置為薄的寬度和高度幾乎與主圖像一樣高。 我們可以使用background-size屬性來使背景圖像適合div即使它更高。
然后，我們絕對定位這兩個，以便它們彼此相鄰。 CSS2 clip屬性允許我們剪切圖像的左側20px，以便此時div和img看起來像一個圖像。
最后，我們為每個塊設置perspective和transform-origin ，並圍繞Y軸將它們彼此遠離旋轉。 由於剪切，我們必須.edge塊比原來略小（使用200px高的圖像我不得不將其降低到196px看起來不錯）但這對我來說非常好用。
顯然你需要填寫供應商前綴（-moz - ， - ms - ， - o - ， - webkit），我會留下陰影作為讀者的練習（容器的簡單背景可能會做）。
使用CSS3透視圖和變換將圖像渲染為3D立方體
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.