1.倒影
（1）倒影+漸變
例：-webkit-box-reflect:right 10px -webkit-radial-gradient(center center,rgba(0,0,0,0) 20%,rgba(0,0,0,0.8) 80%); 第三個屬性值是漸變
2.transform 變形
1>該屬性允許我們對元素進行旋轉 rotate(angle)、扭曲skew(x-angle)、縮放scale(x,y)或移動translate(x,y)
2>3D變形效果
-webkit-transform-style:preserve-3d
3>3D效果視角
perspective 屬性定義3D元素距視角點的距離，以像素計；
例:perspective:number|none; number--元素距離視圖的距離，以像素計
perspective-origin 屬性設置 3D 元素的視角點位置
perspective-origin: x y
3.變形-旋轉
1>transform:rotate();
2D旋轉：rotate(angle) 在參數中規定角度。
例：-webkit-transform:rotate(30deg);
3D旋轉：rotateX(angle)沿著 X 軸的 3D旋轉。
rotateY(angle)沿著 Y 軸的 3D旋轉。
rotateZ(angle)沿著 Z 軸的 3D旋轉。
rotate3d(x,y,z,angle) 定義 3D 旋轉
例1：-webkit-transform:rotate3d(1,1,1,360deg);
例2：-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
遠近互聯前端小華整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業績。
