CSS3旋轉實例學習（附3D旋轉實例）

我們都有在網頁上見過一些交互性的效果，比如用鼠標滑向圖標或是按鈕的時候，圖標會自動旋轉一周，這就是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軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。

查看詳細完整的transform屬性請點擊//www.w3cschool.cn/cssref/pr-transform.html

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:1s ease; /* 轉換效果持續 1秒 */
margin:10%;
}
.rotate-box img {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: 1s opacity;
}

使用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(ellipse closest-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和js代碼；放在<body></body>之間。

HTML代碼：

<divclass="wrap"><divclass="box1 box">1</div><divclass="box2 box">2</div><divclass="box3 box">3</div><divclass="box4 box">4</div><divclass="box5 box">5</div><divclass="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;}
}

? Previous Next ?

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS3教程

CSS3旋轉實例學習（附3D旋轉實例）

CSS3旋轉rotate()方法

CSS3實現3D旋轉

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