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>該屬性允許我們對元素進行旋轉(zhuǎn) 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 屬性設(shè)置 3D 元素的視角點位置
perspective-origin: x y
3.變形-旋轉(zhuǎn)
1>transform:rotate();
2D旋轉(zhuǎn)：rotate(angle) 在參數(shù)中規(guī)定角度。
例：-webkit-transform:rotate(30deg);
3D旋轉(zhuǎn)：rotateX(angle)沿著 X 軸的 3D旋轉(zhuǎn)。
rotateY(angle)沿著 Y 軸的 3D旋轉(zhuǎn)。
rotateZ(angle)沿著 Z 軸的 3D旋轉(zhuǎn)。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)
例1：-webkit-transform:rotate3d(1,1,1,360deg);
例2：-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
遠近互聯(lián)前端小華整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
