整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們都有在網頁上見過一些交互性的效果，比如用鼠標滑向圖標或是按鈕的時候，圖標會自動旋轉一周，這就是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;}}
現3d效果旋轉跳躍的立方體，CSS3中具有的perspective就是為了設置井深，創建一個3D的環境，而transform-style就是為了創建3d環境。
井深：指視覺與平面的距離，使具有三維位置變換的元素產生透視效果，就是我們理解的【Z軸】。 從視覺上觀察，值越大看起來距自己越近，元素整體越大；值越小，越遠，元素整體越小。在設計中給需要3D的盒子的父級設置井深，讓其具有立體透視效果 ，通常perspective使用的值800px或者1200px ，這兩個值從視覺上看比較舒服，也可以根據需求自行設置。
首先，需要創建一個大盒子div將立方體包裹起來，以便在css樣式中固定六個面的位置：
在CSS中添加相關的樣式如下：
轉木馬
有些小伙伴0基礎小伙伴擔心，我沒有編程工具怎么辦？
這個不需要編程工具的，只需要找9張圖片改改名稱就行
(1) 新建一個文件夾
(2) 文件夾中新建img文件夾 以及一個txt文檔
(3) 把我放在下面的代碼粘貼到txt文檔中
（4）沒有txt后綴的這樣設置一下（這里以win11為例，點擊查看-->顯示-->文件擴展名）
（5）把文本文檔名稱改為旋轉木馬.html
（6）把圖片放在img文件夾里面，需要9張
（7）圖片重命名為 1.jpg 2.jpg 3.jpg 以此規律命名（200 x 300 像素的圖片）
（8）設置圖片像素（用win自帶照片軟件打開-->點擊... --> 重設大小-->自定義尺寸-->把寬度改成200、高度改成200-->保存）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 300px;
/* border: 1px solid black; */
margin: 50px auto;
position: relative;
/* 設置3D 效果 */
transform-style: preserve-3d;
/* 添加3D視距 透視效果 */
/* perspective: 300px; */
transform: rotateX(-15deg);
/* CSS animation動畫屬性
name 定義動畫名稱
duration 定義動畫執行時間 秒/單位
timing-function 定義動畫執行速度 linear 勻速
delay 定義動畫執行等待 秒/單位
iteration-count 定義動畫執行次數 默認為1 無限執行 infinite
animation-play-state 動畫運行狀態控制 默認running運行 paused 暫停
*/
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 10s linear infinite;
}
/* 定義關鍵幀動畫 執行我們定義的動畫 */
@keyframes move{
0%{
/* 在CSS3 變幻屬性中 如果要給一個元素添加多個變幻屬性
需要將所有的變幻屬性都寫在transform
*/
transform:rotateX(-15deg) rotateY(0deg);
}
100%{
transform:rotateX(-15deg) rotateY(360deg);
}
}
/* :hover 偽類選擇器 設置用戶鼠標移入時的效果 */
.box:hover{
/* 當用戶鼠標移入時 動畫由默認的運行狀態變成暫停 */
animation-play-state: paused;
}
.box div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
margin-top: 50px;
}
/* :nth-child(1) */
.box div:nth-child(1){
/* 改變頁面第一張圖片 變幻屬性
transform 變幻屬性
rotate 旋轉
translate 位移
*/
transform: rotateY(40deg) translateZ(275px);
}
.box div:nth-child(2){
transform: rotateY(80deg) translateZ(275px);
}
.box div:nth-child(3){
transform: rotateY(120deg) translateZ(275px);
}
.box div:nth-child(4){
transform: rotateY(160deg) translateZ(275px);
}
.box div:nth-child(5){
transform: rotateY(200deg) translateZ(275px);
}
.box div:nth-child(6){
transform: rotateY(240deg) translateZ(275px);
}
.box div:nth-child(7){
transform: rotateY(280deg) translateZ(275px);
}
.box div:nth-child(8){
transform: rotateY(320deg) translateZ(275px);
}
.box div:nth-child(9){
transform: rotateY(360deg) translateZ(275px);
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="./img/1.jpg" alt="">
</div>
<div>
<img src="./img/2.jpg" alt="">
</div>
<div>
<img src="./img/3.jpg" alt="">
</div>
<div>
<img src="./img/4.jpg" alt="">
</div>
<div>
<img src="./img/5.jpg" alt="">
</div>
<div>
<img src="./img/6.jpg" alt="">
</div>
<div>
<img src="./img/7.jpg" alt="">
</div>
<div>
<img src="./img/8.jpg" alt="">
</div>
<div>
<img src="./img/9.jpg" alt="">
</div>
</div>
</body>
</html>
上一篇：ABB機器人Sockets通訊
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
