CSS3 3D轉換中用perspective實現不同角度查看元素

perspective 多角度查看元素

開發工具與關鍵技術：DreamWeaver    perspective屬性
作者:聽民謠的老貓
撰寫時間：2019/2/1   14:15

我們經常會以九宮圖的方式去展現一些照片:

上面是九宮圖最普遍的一種展現方式了，看多了?看膩了?

試試換不同方式不同角度去展現這組九宮圖:

這種重疊效果不是旋轉，扭曲做出來的。它只是改變了你看這組九宮圖的角度，通過使用css3 3D轉換中用perspective屬性來營造一種不同角度的視圖感。

.design{
	width: 300px;
	height: 200px;
	margin-left: 550px;
	margin-top: 200px;
	perspective: 400px;
}

只需要在css樣式中添加perspective屬性就可以達到上面的效果，不同的賦值就是不同的角度。

• 用處：設置從何處查看一個元素的角度
• 並不是使用瀏覽器都可以使用perspective屬性
  
• 屬性定義及使用說明
  1 ：多少像素的3D元素是從視圖的perspective屬性定義。這個屬性允許你改變3D元素是怎樣查看透視圖。
  2：定義時的perspective屬性，它是一個元素的子元素，透視圖，而不是元素本身。

默認值：	none
繼承：	no
版本：	css3
JavaScript 語法：	object.style.perspective=500

• 語法

perspective: number|none

值	描述
number	元素距離視圖的距離，以像素計。
none	默認值。與 0 相同。不設置透視。

簡單理解就可以快速運用CSS3 3D轉換中用perspective實現不同角度查看元素，快去試試吧。