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屬性請點擊閱讀全文
CSS3旋轉rotate()方法
在CSS3中,我們可以使用rotate()方法來將元素相對中心原點進行旋轉。這裏的旋轉是二維的,不涉及三維空間的操作。
語法:
transform:rotate(度數);
說明:
度數指的是元素相對中心原點進行旋轉的度數,單位爲deg。其中,deg是degree(度數)的縮寫。如果度數爲正,則表示元素相對原點中心順時針旋轉;如果度數爲負,則表示元素相對原點中心進行逆時針旋轉。
舉例:
<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>
效果如下:
分析:
這裏虛線框爲原始位置,藍色背景盒子爲順時針旋轉30度後的效果。
CSS3實現3D旋轉
用CSS3製作3D旋轉圖像,效果很漂亮,3D旋轉的特別之處就是支持陰影旋轉和兼容響應式網頁設計,使得整體場景非常有感覺。
先看一個簡單的3D旋轉效果例子:
正面:鼠標移上去就開始旋轉
旋轉中:這是旋轉至背面的效果,以旋轉並帶半透明漸變的方式顯示。
背面:旋轉後,爲圖像添加一些文字介紹元素,充實這個元素。
HTML代碼
<div class="photo-container">
<div class="rotate-box">
<img src="winwall.jpg"/>
<div class="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開始-->......<!--效果html結束-->之間的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;}
}