切圖網客戶項目中碰到一個問題，有一個數字需要傾斜，這個便用到了css3的 rotate的旋轉的屬性，沒有用 skew傾斜，因為傾斜以后的文字是被拉伸變形了，但我并不像這樣，下面是css3詳細，另外要說明的是，這個數字做了 滾動到當前屏幕的時候，數字增長。

用到了jquery插件

1. <script type='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script> <!--滾動視差-->

2. <script type="text/javascript" src="js/jquery.countTo.js"></script> <!--數字增長-->

共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。

二.縮放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

參數表示縮放倍數；

• 一個參數時：表示水平和垂直同時縮放該倍率

• 兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。

三.傾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

參數表示傾斜角度，單位deg

• 一個參數時：表示水平方向的傾斜角度；

• 兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

四.移動 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

參數表示移動距離，單位px，

• 一個參數時：表示水平方向的移動距離；

• 兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。

五.基準點 transform-origin

在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。

用法：transform-origin: 10px 10px;

共兩個參數，表示相對左上角原點的距離，單位px，第一個參數表示相對左上角原點水平方向的距離，第二個參數表示相對左上角原點垂直方向的距離；

兩個參數除了可以設置為具體的像素值，其中第一個參數可以指定為left、center、right，第二個參數可以指定為top、center、bottom。

六.多方法組合變形

上面我們介紹了使用transform對元素進行旋轉、縮放、傾斜、移動的方法，這里講介紹綜合使用這幾個方法來對一個元素進行多重變形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執行順序為1.rotate 2.scalse 3.skew 4.translate

原文地址：http://www.qietu.cn/thread-15197-1-1.html （切圖社區）

加微信公眾號：qietuwang （限做前端的人）

們都有在網頁上見過一些交互性的效果，比如用鼠標滑向圖標或是按鈕的時候，圖標會自動旋轉一周，這就是CSS3旋轉效果。在CSS3中有個常見的transform應用，transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。本文主要側重講解CSS3的平面旋轉（2D）方法和立體旋轉（3D）方法。不過既然提起transform，還是先普及一下transform屬性的基本知識：

在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

1、旋轉rotate() ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），angle是指旋轉角度，如果設置的值為正數表示順時針旋轉，負數則表示逆時針旋轉。如：transform:rotate(30deg)。

2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，默認為0deg。

3、縮放scale([, ])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用于對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。如：transform:scale(2,1.5)。

4、移動translate([, ]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果 未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值為負數時，反方向移動物體，其基點默認為元素 中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px)。

5、矩陣變形matrix(, , , , , ) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。

CSS3旋轉rotate()方法

在CSS3中，我們可以使用rotate()方法來將元素相對中心原點進行旋轉。這里的旋轉是二維的，不涉及三維空間的操作。

語法：

transform：rotate(度數);

說明：

度數指的是元素相對中心原點進行旋轉的度數，單位為deg。其中，deg是degree（度數）的縮寫。如果度數為正，則表示元素相對原點中心順時針旋轉；如果度數為負，則表示元素相對原點中心進行逆時針旋轉。

舉例：

<style>.demo{margin:100pxauto;width:300px;height:300px;background:#ededed;border:1pxdotted#ff0000;position:relative;}.fl{width:300px;height:145px;background:#00cb99;}.fr{width:300px;height:145px;margin-top:10px;background:#0093b4;}.pa{position:absolute;top:75px;left:75px;width:150px;height:150px;background-color:#f2f2f2;}</style><divclass="demo"><divclass="fl"></div><divclass="fr"></div><divclass="pa"></div></div>

效果如下：

分析：

這里虛線框為原始位置，藍色背景盒子為順時針旋轉30度后的效果。

CSS3實現3D旋轉

用CSS3制作3D旋轉圖像，效果很漂亮，3D旋轉的特別之處就是支持陰影旋轉和兼容響應式網頁設計，使得整體場景非常有感覺。

先看一個簡單的3D旋轉效果例子：

正面：鼠標移上去就開始旋轉

旋轉中：這是旋轉至背面的效果，以旋轉并帶半透明漸變的方式顯示。

背面：旋轉后，為圖像添加一些文字介紹元素，充實這個元素。

HTML代碼

<divclass="photo-container"><divclass="rotate-box"><imgsrc="winwall.jpg"/><divclass="text"><h2>這是一個標題</h2><p>這是一段圖片相關的簡介內容。。</p></div></div></div>

CSS代碼

.photo-container{perspective:1200px;/*透視視圖*/width:45%;float:left;}.rotate-box{position:relative;transform-style:preserve-3d;/*3D轉換*/transition:1sease;/*轉換效果持續1秒*/margin:10%;}.rotate-boximg{width:100%;height:auto;}

背面文本樣式，透明背景，并設置默認為反轉180度，其次要將圖像置于圖像的背面，所以這里我們利用z軸來控制，CSS代碼如下：

.text{position:absolute;top:0;width:100%;height:100%;transform:rotateY(180deg)translateZ(1px);/*反轉180度并設置z軸讓其置于圖片背面*/color:#666;text-align:center;opacity:.06;background:rgba(255,255,255,.9);transition:1sopacity;}

使用Hover來觸發動畫

.photo-container:hover.rotate-box{transform:rotateY(180deg);}.photo-container:hover.text{opacity:1}

通過偽元素（:after）給圖像添加一個透視陰影，使整體更有3D立體感覺。

.rotate-box:after{content:'';display:block;width:100%;height:7vw;/*vw是移動設計備窗體單位*/transform:rotateX(90deg);background-image:radial-gradient(ellipseclosest-side,rgba(0,0,0,0.05)0%,rgba(0,0,0,0)100%);/*radial-gradient是徑向漸變*/}

CSS3實現3D立方體旋轉效果

使用方法：

1、調用CSS樣式：

<link rel="stylesheet" type="text/css" href="css/style.css" />

2、添加HTML代碼：

將<!--效果html開始-->......<!--效果html結束-->之間的html和js代碼；放在<body></body>之間。

HTML代碼：

<divclass="wrap"><divclass="box1box">1</div><divclass="box2box">2</div><divclass="box3box">3</div><divclass="box4box">4</div><divclass="box5box">5</div><divclass="box6box">6</div></div>

CSS 3代碼：

*{margin:0;padding:0;}html,body{height:100%;background:black;}.wrap{height:100%;position:relative;-webkit-transform-style:preserve-3d;-webkit-perspective:0px;-moz-transform-style:preserve-3d;-moz-perspective:0px;-webkit-animation:mydhua5seaseinfinite;-moz-animation:mydhua5seaseinfinite;}.box{width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px00-100px;line-height:200px;text-align:center;font-size:48px;color:white;}.box1{-webkit-transform:rotatey(90deg)translatez(-100px);-moz-transform:rotatey(90deg)translatez(-100px);background:rgba(128,0,128,.5);}.box2{-webkit-transform:rotatey(90deg)translatez(100px);-moz-transform:rotatey(90deg)translatez(100px);background:rgba(255,0,255,.5);}.box3{-webkit-transform:rotatex(90deg)translatez(100px);-moz-transform:rotatex(90deg)translatez(100px);background:rgba(255,153,204,.5);}.box4{-webkit-transform:rotatex(90deg)translatez(-100px);-moz-transform:rotatex(90deg)translatez(-100px);background:rgba(0,204,255,.5);}.box5{-webkit-transform:translatez(-100px);-moz-transform:translatez(-100px);background:rgba(153,204,255,.5);}.box6{-webkit-transform:translatez(100px);-moz-transform:translatez(100px);background:rgba(0,255,255,.5);}@-webkit-keyframesmydhua{0%{-webkit-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);-webkit-transform-origin:centercenter;}100%{-webkit-transform:rotateX(180deg)rotateY(180deg)rotateZ(180deg);-webkit-transform-origin:centercenter;}}@-moz-keyframesmydhua{0%{-moz-transform:rotateX(0deg)rotateY(0deg)rotateZ(0deg);-webkit-transform-origin:centercenter;}100%{-moz-transform:rotateX(180deg)rotateY(180deg)rotateZ(180deg);-webkit-transform-origin:centercenter;}}