Zi 字媒體

CSS3的transform可以做2D的操作，當然也有3D 但需要再一個擁有perspective屬性的父元素才能顯現3D的效果 例如： 3D perspective屬性固名思義就是透視的意思；該屬性可以定義3D視覺的角度，讓底下子元素使用3D特效時能夠完整顯示。 perspective使用方法 perspective:150px; /* 目前並非所有瀏覽器皆支援 */ -webkit-perspective:150px; -moz-perspective:150px; 另外還有個屬性叫perspective-origin 功能是用來定義X和Y軸為基礎的3D位置(定義初始位置) perspective-origin使用方法 屬性值：(x軸：left、center、right、長度、百分比) (y軸：top、center、bottom、長度、百分比) /* perspective-origin 參數預設是50% 50% */ -webkit-perspective-origin: 40% 60%;/* Safari and Chrome */ -webkit-perspective-origin: 40px 60px;/* Safari and Chrome */ -moz-perspective-origin:left bottom; /* Firefox */ 注意：perspective和perspective-origin受影響的是子元素，而非元素本身 最後就可以對div做3D的效果(rotateX和rotateY) -webkit-transform: rotateX(290deg); -webkit-transform: rotateY(290deg); -moz-transform: rotateX(290deg); -moz-transform: rotateY(290deg); Categories: CSS 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: