CSS3旋轉(zhuǎn)實(shí)例學(xué)習(xí)（附3D旋轉(zhuǎn)實(shí)例）

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

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

1、旋轉(zhuǎn)rotate() ：通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg)。

2、扭曲skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無(wú)斜切。skew是用來(lái)對(duì)元素進(jìn)行扭曲變行，第一個(gè)參數(shù)是水平方向扭曲角度，第二個(gè)參數(shù)是垂直方向扭曲角度。其中第二個(gè)參數(shù)是可選參數(shù)，默認(rèn)為0deg。

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

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

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

查看詳細(xì)完整的transform屬性請(qǐng)點(diǎn)擊//hgci.cn/cssref/pr-transform.html

CSS3旋轉(zhuǎn)rotate()方法

在CSS3中，我們可以使用rotate()方法來(lái)將元素相對(duì)中心原點(diǎn)進(jìn)行旋轉(zhuǎn)。這里的旋轉(zhuǎn)是二維的，不涉及三維空間的操作。
語(yǔ)法：
transform：rotate(度數(shù));

說(shuō)明：
度數(shù)指的是元素相對(duì)中心原點(diǎn)進(jìn)行旋轉(zhuǎn)的度數(shù)，單位為deg。其中，deg是degree（度數(shù)）的縮寫(xiě)。如果度數(shù)為正，則表示元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果度數(shù)為負(fù)，則表示元素相對(duì)原點(diǎn)中心進(jìn)行逆時(shí)針旋轉(zhuǎn)。

舉例：

<style>
.demo { margin:100px auto; width:300px; height:300px; background:#ededed; border:1px dotted #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>
<div class="demo">
     <div class="fl"></div>
     <div class="fr"></div>
     <div class="pa"></div>
</div>

效果如下：

CSS3實(shí)現(xiàn)3D旋轉(zhuǎn)

正面：鼠標(biāo)移上去就開(kāi)始旋轉(zhuǎn)
HTML代碼

<div class="photo-container">
<div class="rotate-box">
<img src="winwall.jpg"/>
<div class="text">
<h2>這是一個(gè)標(biāo)題</h2>
<p>這是一段圖片相關(guān)的簡(jiǎn)介內(nèi)容。。</p>
</div>
</div>
</div>

CSS代碼

.photo-container {
perspective: 1200px; /* 透視視圖 */
width:45%;
float:left;
}
.rotate-box {
position:relative;
transform-style: preserve-3d; /* 3D 轉(zhuǎn)換 */
transition:1s ease; /* 轉(zhuǎn)換效果持續(xù) 1秒 */
margin:10%;
}
.rotate-box img {width:100%;height:auto;}

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

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

使用Hover來(lái)觸發(fā)動(dòng)畫(huà)

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

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

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

CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果

使用方法：
1、調(diào)用CSS樣式：
<link rel="stylesheet" type="text/css" href="css/style.css" />


2、添加HTML代碼：
將<!--效果html開(kāi)始-->......<!--效果html結(jié)束-->之間的html和js代碼；放在<body></body>之間。

HTML代碼：

 <div class="wrap">
        <div class="box1 box">
            1</div>
        <div class="box2 box">
            2</div>
        <div class="box3 box">
            3</div>
        <div class="box4 box">
            4</div>
        <div class="box5 box">
            5</div>
        <div class="box6 box">
            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:mydhua 5s ease infinite;
	  -moz-animation:mydhua 5s ease infinite;

	 

}
.box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;
	 margin:-100px 0 0 -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-keyframes mydhua{

	0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{

	0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}