目錄
一、CSS3過(guò)渡（transition）（重點(diǎn)）
二、CSS3過(guò)渡練習(xí)——進(jìn)度條案例
三、CSS3 2D轉(zhuǎn)換(translate、rotate、scale、轉(zhuǎn)換中心點(diǎn)transform-origin)
四、CSS3 動(dòng)畫(huà)
五、CSS3動(dòng)畫(huà)常見(jiàn)屬性
五、熱點(diǎn)圖案例（動(dòng)畫(huà)）
六、速度曲線之steps步長(zhǎng)（案例——奔跑的熊大）
七、CSS3 3D轉(zhuǎn)換（3D 位移：translate3d(x,y,z)、3D 旋轉(zhuǎn)：rotate3d(x,y,z)、透視：perspective、3D呈現(xiàn) transform-style）
八、案例（兩面翻轉(zhuǎn)的盒子、3D導(dǎo)航欄、旋轉(zhuǎn)木馬案例）?
八、瀏覽器私有前綴
一、CSS3過(guò)渡（transition）（重點(diǎn)）
過(guò)渡動(dòng)畫(huà)：是從一個(gè)狀態(tài) 漸漸的過(guò)渡到另外一個(gè)狀態(tài)
可以讓頁(yè)面更好看，更動(dòng)感十足，雖然 低版本瀏覽器不支持（ie9以下版本）但是不影響頁(yè)面布局
經(jīng)常和 :hover 一起搭配使用
語(yǔ)法：
transition :? 要過(guò)渡的屬性? 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始 ;
1. 屬性：想要變化的 css 屬性，寬度高度 背景顏色 內(nèi)外邊距都可以。如果想要所有屬性都變化過(guò)渡，寫(xiě)一個(gè) all 就可以。
2. 花費(fèi)時(shí)間： 單位是 秒（必須寫(xiě)單位）比如 0.5s
3. 運(yùn)動(dòng)曲線：默認(rèn)是 ease (可以省略)
4. 何時(shí)開(kāi)始：?jiǎn)挝皇?秒（必須寫(xiě)單位）可以設(shè)置延遲觸發(fā)時(shí)間? 默認(rèn)是 0s （可以省略）
如果想寫(xiě)多個(gè)屬性，利用逗號(hào), 進(jìn)行分割，如 transition: width 1s,? height 1s;
如果想要多個(gè)屬性都變化，屬性寫(xiě) all 就可以了?如 transition: all 1s;
記住過(guò)渡的使用口訣：誰(shuí)做過(guò)渡給誰(shuí)加
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 變化的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始; */
transition: width 1s;
}
div:hover {
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
二、CSS3過(guò)渡練習(xí)——進(jìn)度條案例
?設(shè)置當(dāng)鼠標(biāo)移到外部盒子初時(shí)，進(jìn)度條加滿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: width 1s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>三、CSS3 2D轉(zhuǎn)換(translate、rotate、scale、轉(zhuǎn)換中心點(diǎn)transform-origin)
轉(zhuǎn)換 (transform) 是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放等效果。
轉(zhuǎn)換（transform）可以簡(jiǎn)單理解為變形
移動(dòng)：translate
? ? ? 可以該變?cè)卦陧?yè)面中的位置，類(lèi)似定位。
? ? ? 移動(dòng)盒子的位置： 定位? ? 盒子的外邊距? ?2d轉(zhuǎn)換移動(dòng)
? ? ? 語(yǔ)法：
? ? ? ? ? ? ? ? transform: translate(x,y);? 或者分開(kāi)寫(xiě)
? ? ? ? ? ? ? ? transform: translateX(n);?
? ? ? ? ? ? ? ? transform: translateY(n);?
? ? ? ? 重點(diǎn)：
? ? ? ? ? ? ?定義2D 轉(zhuǎn)換中的移動(dòng)，沿著 X 和 Y軸移動(dòng)元素
? ? ? ? ? ? ?translate最大的優(yōu)點(diǎn)：不會(huì)影響到其他元素的位置
? ? ? ? ? ? ?translate 中的百分比單位是相對(duì)于自身元素的 translate:(50%,50%);
? ? ? ? ? ? ?對(duì)行內(nèi)標(biāo)簽沒(méi)有效果
? ? ? ?讓一個(gè)盒子水平垂直居中
? ? ? ? ? ? ?不使用之前的margin-top 、marfin-left 因?yàn)槠湫枰獙?xiě)固定值，使用translate:(50%,50%);更好，下面是讓盒子水平垂直居中的例子：
<style>
/* 移動(dòng)盒子的位置： 定位? ? 盒子的外邊距? ?2d轉(zhuǎn)換移動(dòng) */
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px;
margin-left: -100px; */
/* translate(-50%, -50%)盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body> <style>
/* 移動(dòng)盒子的位置： 定位? ? 盒子的外邊距? ?2d轉(zhuǎn)換移動(dòng) */
.one {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x 軸上移動(dòng)位置，y 就是 y軸上移動(dòng)位置 ，中間用逗號(hào)隔開(kāi)*/
transform: translate(50%, 100px);
/* 1. 只移動(dòng) x坐標(biāo) */
/* transform: translate(100px,0); */
/* transform: translateX(100px); */
}
.two {
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>旋轉(zhuǎn)：rotate
? ? ?2D旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時(shí)針或者逆時(shí)針旋轉(zhuǎn)。
? ? ?語(yǔ)法：
? ? ? ? transform: rotate(度數(shù))
? ? ?重點(diǎn)：
? ? ? ? rotate 里面跟度數(shù)，單位是 deg 比如 rotate(45deg)
? ? ? ? 角度為正時(shí)，順時(shí)針；負(fù)時(shí)，為逆時(shí)針
? ? ? ? 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)
? ? ?旋轉(zhuǎn)案例——三角形
? ? ? ? ?之前使用圖標(biāo)字體來(lái)設(shè)置三角形，現(xiàn)在可以通過(guò)為div::after 設(shè)置一個(gè)小盒子，只保留需要的邊框并進(jìn)行旋轉(zhuǎn)，即可得到三角形，還可以在鼠標(biāo)移到div 時(shí)，進(jìn)行旋轉(zhuǎn)設(shè)置。代碼如下：
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
position: absolute;
top: 8px;
right: 15px;
content: '';
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all .1s;
}
/* 鼠標(biāo)經(jīng)過(guò)div 里面的三角時(shí)旋轉(zhuǎn) */
div:hover::after {
/* 之前已經(jīng)旋轉(zhuǎn)了45度，所以應(yīng)該在45度的基礎(chǔ)上再旋轉(zhuǎn)180度，即45 +180=225deg */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>? ? ?設(shè)置轉(zhuǎn)換中心點(diǎn) transform-origin
? ? ? ? 語(yǔ)法：
? ? ? ? ? ? transform-origin: x y;
? ? ? ? 重點(diǎn)：
? ? ? ? ? ? 注意后面的參數(shù) x 和 y 用空格隔開(kāi)
? ? ? ? ? ? x y 默認(rèn)轉(zhuǎn)換的中心點(diǎn)是元素的中心點(diǎn)（50%? 50%）
? ? ? ? ? ? 還可以給x y 設(shè)置 像素 或者? 方位名詞 （top bottom left right center）
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
transition: all 1s;
/* 可以跟方位名詞 ，默認(rèn)的是50% 50%,等價(jià)于 center center*/
/* transform-origin: left bottom; */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>? ? ?案例：旋轉(zhuǎn)案例
<style>
div {
/* 一般看不到before偽元素，故溢出設(shè)置隱藏 */
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 0 auto;
}
div::before {
display: block;
content: '黑馬';
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(-180deg);
transform-origin: left bottom;
transition: all .5s;
}
/* 鼠標(biāo)經(jīng)過(guò)div 里面的before復(fù)原 */
div:hover::before {
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
</body>縮放：scale
? ? ?只要給元素添加了這個(gè)屬性就能控制它放大還是縮小。
? ? ?語(yǔ)法：
? ? ? ? transform: scale(x, y);
? ? ?注意：
? ? ? ? 注意其中的x 和 y 用逗號(hào)分隔
? ? ? ? 里面寫(xiě)的數(shù)字不跟單位，就是倍數(shù)的意思
? ? ? ? transform: scale(1, 1)：寬和高都放大一倍，相對(duì)于沒(méi)有放大
? ? ? ? transform: scale(2, 2)：寬和高都放大了 2倍
? ? ? ? transform: scale(2)：只寫(xiě)一個(gè)參數(shù)，第二個(gè)參數(shù)則和第一個(gè)參數(shù)一樣，相當(dāng)于 scale(2, 2)
? ? ? ? transform: scale(0.5, 0.5)：縮小 ，小于1就是縮小
? ? ? ? scale 縮放最大的優(yōu)勢(shì)：可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放，默認(rèn)以中心點(diǎn)縮放的，而且不影響其它盒子
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
div:hover {
/* 等比例縮放 同時(shí)修改寬度和高度，有簡(jiǎn)單的寫(xiě)法，
以下是寬度修改了0.5倍，高度默認(rèn)和第一個(gè)參數(shù)一樣 */
transform: scale(0.5);
transform-origin: left top;
}
</style>
</head>
<body>
<div></div>
</body>? ? ?圖片放大案例
<style>
div {
/* 使圖片放大時(shí)超過(guò)的內(nèi)容不顯示 */
overflow: hidden;
float: left;
margin: 10px;
}
div img {
/* 誰(shuí)做過(guò)渡給誰(shuí)加 */
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="./media/scale.jpg" alt=""></a></div>
</body>? ? 分頁(yè)按鈕案例
<style>
ul li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .3s;
}
ul li:hover {
transform: scale(1.3);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>2D轉(zhuǎn)換綜合寫(xiě)法
? ?注意：
? ? ? ? 1. 同時(shí)使用多個(gè)轉(zhuǎn)換，其格式為 ：transform: translate()? rotate()? scale( ) …等，
? ? ? ? 2. 其順序會(huì)影響轉(zhuǎn)換的效果。（先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸的方向）
? ? ? ? 3. 當(dāng)我們同時(shí)有位移 和其他屬性的時(shí)候，記得位移放到最前。?
2D轉(zhuǎn)換小結(jié)
四、CSS3 動(dòng)畫(huà)
動(dòng)畫(huà)（animation）是CSS3中具有顛覆性的特征之一，可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà)，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果。
相比較過(guò)渡，動(dòng)畫(huà)可以實(shí)現(xiàn)更多變化，更多控制，連續(xù)自動(dòng)播放等效果。
動(dòng)畫(huà)的基本使用
? ? ? 制作動(dòng)畫(huà)分為兩步：
? ? ? ? ? ? 1. 先定義動(dòng)畫(huà)
? ? ? ? ? ? ? ? 用 keyframes 定義動(dòng)畫(huà)（類(lèi)似定義類(lèi)選擇器）
? ? ? ? ? ? 2. 再使用（調(diào)用）動(dòng)畫(huà)
<style>
/* 想頁(yè)面一打開(kāi)，一個(gè)盒子就從左邊走到右邊 */
/* 定義動(dòng)畫(huà) */
@keyframes move {
/* 開(kāi)始狀態(tài) */
0% {
transform: translate(0px);
}
/* 結(jié)束狀態(tài) */
100% {
transform: translate(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 調(diào)用動(dòng)畫(huà) */
animation-name: move;
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
注意：動(dòng)畫(huà)序列里面的百分比要為整數(shù)。
里面的百分比就是總的持續(xù)時(shí)間 （下面案例是8s）的劃分?
<style>
/* 定義動(dòng)畫(huà) */
/* 可以做多個(gè)狀態(tài)的變化 keyframe關(guān)鍵幀 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 調(diào)用動(dòng)畫(huà) */
animation-name: move;
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>五、CSS3動(dòng)畫(huà)常見(jiàn)屬性
?動(dòng)畫(huà)的完成時(shí)間、速度曲線、以及何時(shí)開(kāi)始的屬性與過(guò)渡相同。
<style>
/* 想頁(yè)面一打開(kāi)，一個(gè)盒子就從左邊走到右邊 */
/* 定義動(dòng)畫(huà) */
@keyframes move {
0% {
transform: translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 動(dòng)畫(huà)名稱(chēng) */
animation-name: move;
/* 動(dòng)畫(huà)持續(xù)時(shí)間 */
animation-duration: 2s;
/* 運(yùn)動(dòng)曲線 */
animation-timing-function: ease;
/* 動(dòng)畫(huà)何時(shí)開(kāi)始 */
animation-delay: 1s;
/* 重復(fù)次數(shù) iteration 重復(fù) count 次數(shù) infinite 無(wú)限的 */
animation-iteration-count: 2;
/* 是否反方向播放 默認(rèn)的是normal 如果要反方向就用 alternate */
animation-direction: normal;
/* 動(dòng)畫(huà)結(jié)束后的狀態(tài) 保持forwards 回到起始狀態(tài)backwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠標(biāo)經(jīng)過(guò)div 讓這個(gè)div停止動(dòng)畫(huà)，鼠標(biāo)離開(kāi)就繼續(xù)動(dòng)畫(huà) */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性
animation：動(dòng)畫(huà)名稱(chēng)? 持續(xù)時(shí)間? 運(yùn)動(dòng)曲線? 何時(shí)開(kāi)始? 播放次數(shù)? 是否反方向? 動(dòng)畫(huà)起始或結(jié)束狀態(tài)?
? ? ?簡(jiǎn)寫(xiě)屬性里面不包含 animation-play-state
? ? ?暫停動(dòng)畫(huà)：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過(guò)等其他配合使用
? ? ?想要?jiǎng)赢?huà)走回來(lái)，而不是直接跳回來(lái)：animation-direction: alternate;
? ? ?盒子動(dòng)畫(huà)結(jié)束后，停在結(jié)束位置：animation-fill-mode: forwards
五、熱點(diǎn)圖案例（動(dòng)畫(huà)）
<style>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 617px;
background: url(./media/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 227px;
right: 193px;
}
.tb {
top: 498px;
right: 80px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保證小波紋在父盒子里面水平垂直居中 放大之后就會(huì)中心向四周發(fā)散*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
/* 注意選擇器權(quán)重問(wèn)題，之前使用的簡(jiǎn)寫(xiě)形式，默認(rèn)animation-delay為0,
.city div[class^="pulse"]權(quán)重為21，而如果只寫(xiě).pulse2權(quán)重為10不執(zhí)行
*/
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% { }
70% {
/* 使用高度寬度變大盒子，而不使用scale的原因是：scale縮放時(shí)，
同時(shí)也會(huì)將盒子的陰影放大，會(huì)導(dǎo)致特別大，效果不好看 故不使用transform: scale(5);*/
width: 40px;
height: 40px;
/* opacity 不透明度，從0（完全透明）到 1（完全不透明） */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>六、速度曲線之steps步長(zhǎng)（案例——奔跑的熊大）
速度曲線
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 讓文字強(qiáng)制一行顯示 */
white-space: nowrap;
/* steps 就是分幾步來(lái)完成動(dòng)畫(huà) 有了steps 就不要再寫(xiě) ease 或者 linear了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世紀(jì)佳緣我在這里等你</div>
</body>案例：奔跑的熊大
元素可以添加多個(gè)動(dòng)畫(huà)，用逗號(hào)分隔
<style>
body {
background-color: pink;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(./media/bear.png);
/* 元素可以添加多個(gè)動(dòng)畫(huà)，用逗號(hào)分隔 */
animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>七、CSS3 3D轉(zhuǎn)換（3D 位移：translate3d(x,y,z)、3D 旋轉(zhuǎn)：rotate3d(x,y,z)、透視：perspective、3D呈現(xiàn) transform-style）
三維坐標(biāo)系其實(shí)就是指立體空間，立體空間是由3個(gè)軸共同組成的。
? ?x 軸：水平向右? ? 注意：x右邊是正值，左邊是負(fù)值
? ?y 軸：垂直向下? ? 注意：y下面是正值，上面是負(fù)值
? ?z?軸：垂直屏幕? ? 注意：往外面是正值，往里面是負(fù)值
3D轉(zhuǎn)換主要學(xué)習(xí)工作中最常用的3D位移 和 3D旋轉(zhuǎn)
主要知識(shí)點(diǎn)
? ? ? ? 3D 位移：translate3d(x,y,z)
????????3D 旋轉(zhuǎn)：rotate3d(x,y,z)
? ? ? ? 透視：perspective
? ? ? ? 3D呈現(xiàn) transform-style
3D 位移：translate3d
? ? ?3D移動(dòng)在2D移動(dòng)的基礎(chǔ)上多加了一個(gè)可以移動(dòng)的方向，就是z 軸方向。
? ? ? ? transform: translateX( 100px): 僅僅是在X軸上移動(dòng)
? ? ? ? transform: translateY( 100px): 僅僅是在Y軸上移動(dòng)
? ? ? ? transform: translateZ( 100px): 僅僅是在Z軸上移動(dòng)（注意：translateZ一般用px單位）
? ? ? ? transform: translate3d( x,y,z): 其中x、y、z分別指要移動(dòng)的軸的方向的距離
? ? ? ? ? ? ? ? 注意，xyz是不能省略的，如果沒(méi)有就寫(xiě)0.
透視：perspective
? ? ?在2D平面產(chǎn)生近大遠(yuǎn)小視覺(jué)立體，但是只是效果二維的
? ? ? ? 如果想要在網(wǎng)頁(yè)產(chǎn)生3D效果需要透視（理解成3D物體投影在2D平面內(nèi)）。
? ? ? ? 模擬人類(lèi)的視覺(jué)位置，可認(rèn)為安排一只眼睛去看
? ? ? ? 透視我們也稱(chēng)為視距：視距就是人的眼睛到屏幕的距離
? ? ? ? 距離視覺(jué)點(diǎn)越近的在電腦平面成像越大，越遠(yuǎn)成像越小
? ? ? ? 透視的單位是像素
? ? 透視寫(xiě)在被觀察元素的父盒子上面的
3D 旋轉(zhuǎn) rotate3d
? ? ?3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x軸、y軸、z軸或者自定義軸進(jìn)行旋轉(zhuǎn)。
? ? ?語(yǔ)法：
? ? ? ? transform: rotateX(45deg): 沿著x 軸正方向旋轉(zhuǎn)45度
? ? ? ? transform: rotateY(45deg): 沿著y?軸正方向旋轉(zhuǎn)45度
? ? ? ? transform: rotateZ(45deg): 沿著z?軸正方向旋轉(zhuǎn)45度
? ? ? ? transform: rotate3d(x,y,x,deg): 沿著自定義軸旋轉(zhuǎn)旋轉(zhuǎn)，deg為角度（了解即可）
? ? 對(duì)于旋轉(zhuǎn)的方向判斷 需要先學(xué)習(xí)一個(gè)左手準(zhǔn)則。
? ? 左手準(zhǔn)則：
? ? ? ? 左手的手拇指指向x 軸正方向
? ? ? ? 其余手指的彎曲方向就是該元素沿著 x軸旋轉(zhuǎn)的方向（正值）
? ? ? ? 同理 y、z旋轉(zhuǎn)方向也使用左手準(zhǔn)則
?3D呈現(xiàn) transform-style
? ? ?控制子元素是否開(kāi)啟三維立體環(huán)境
? ? ?transform-style: flat? 子元素不開(kāi)啟3d 立體空間 默認(rèn)的
??? ?transform-style: preserve-3d? 子元素開(kāi)啟3d 立體空間
? ? ?代碼要寫(xiě)給父級(jí)，但影響的是子盒子
? ? ? 這個(gè)屬性很重要，后面必用??
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 500px;
/* 讓子元素保持3d 立體空間環(huán)境 */
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>八、案例（兩面翻轉(zhuǎn)的盒子、3D導(dǎo)航欄、旋轉(zhuǎn)木馬案例）?
兩面翻轉(zhuǎn)的盒子
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
perspective: 500px;
/* 讓背面的紫色盒子保持3d 立體空間環(huán)境 */
transform-style: preserve-3d;
transition: all 2s;
}
.front,
.back {
/* 因?yàn)閮蓚€(gè)盒子是疊在一起的，所以要為其加定位 */
position: absolute;
width: 100%;
height: 100%;
line-height: 300px;
text-align: center;
font-size: 30px;
color: #fff;
border-radius: 50%;
}
.front {
/* 讓粉色盒子疊在紫色的上面 */
transform: translateZ(1px);
background-color: pink;
}
.back {
background-color: purple;
/* 像手機(jī)一樣 背靠背旋轉(zhuǎn)讓紫色盒子 */
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">黑馬程序猿</div>
<div class="back">pink老師這里等你</div>
</div>
</body>3D導(dǎo)航欄案例
<style>
* {
padding: 0;
margin: 0;
}
ul {
margin: 100px;
}
li {
float: left;
margin: 0 10px;
list-style: none;
width: 120px;
height: 35px;
/* 注意透視給box的父盒子li加，因?yàn)楫?dāng)鼠標(biāo)移動(dòng)到box上時(shí)，box也會(huì)翻轉(zhuǎn)
box需要透視，因此要給其父元素li添加 */
perspective: 200px;
}
li .box{
position: relative;
width: 100%;
height: 100%;
line-height: 35px;
font-size: 14px;
text-align: center;
transform-style: preserve-3d;
transition: all 1s;
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front {
/* 移動(dòng)粉色盒子，因?yàn)樾D(zhuǎn)默認(rèn)按照中心點(diǎn)旋轉(zhuǎn) */
transform: translateZ(17.5px);
background-color: pink;
}
.bottom {
background-color: purple;
/* 這個(gè) x軸一定是負(fù)值，如果有移動(dòng)或者其他樣式，必須先寫(xiě)移動(dòng)*/
transform:translate(0,17.5px) rotateX(-90deg);
color: #fff;
}
.box:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">黑馬程序猿</div>
<div class="bottom">pink老師這里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑馬程序猿</div>
<div class="bottom">pink老師這里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">黑馬程序猿</div>
<div class="bottom">pink老師這里等你</div>
</div>
</li>
</ul>
</body>旋轉(zhuǎn)木馬案例?
?
<style>
@keyframes r {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
body {
/* 因?yàn)橐osection 加動(dòng)畫(huà)，需要透視效果，所以給section的父盒子加透視 */
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
/* 添加動(dòng)畫(huà)效果 */
animation: r 4s linear infinite;
background: url(./media/pig.jpg) no-repeat;
}
/* 鼠標(biāo)放上去停止動(dòng)畫(huà) */
section:hover {
animation-play-state: paused;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./media/dog.jpg) no-repeat;
}
section .one {
transform: translateZ(300px);
}
section .two {
/* 先旋轉(zhuǎn)再移動(dòng) */
transform: rotateY(60deg) translateZ(300px) ;
}
section .three {
transform: rotateY(120deg) translateZ(300px) ;
}
section .four {
transform: rotateY(180deg) translateZ(300px);
}
section .five {
transform: rotateY(240deg) translateZ(300px);
}
section .six {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</section>
</body><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes r {
0% {}
100% {
transform: rotateY(360deg);
}
}
body {
/* 因?yàn)橐osection 加動(dòng)畫(huà)，需要透視效果，所以給section的父盒子加透視 */
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: r 4s infinite;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./media/dog.jpg) no-repeat;
}
section .one {
transform: translateZ(300px);
}
section .two {
transform: translate3d(225px,0,150px) rotateY(60deg);
}
section .three {
transform: translate3d(225px,0,-150px) rotateY(-60deg);
}
section .four {
transform: translateZ(-300px);
}
section .five {
transform: translate3d(-225px,0,-150px) rotateY(60deg);
}
section .six {
transform: translate3d(-225px,0,150px) rotateY(-60deg);
}
</style>
</head>
<body>
<section>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</section>
</body>
</html>八、瀏覽器私有前綴
瀏覽器私有前綴是為了兼容老版本的寫(xiě)法，比較新版本的瀏覽器無(wú)需添加。
?
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-777760.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-777760.html
到了這里，關(guān)于CSS3過(guò)渡、過(guò)渡練習(xí)——進(jìn)度條案例、2D轉(zhuǎn)換(translate、rotate、scale、轉(zhuǎn)換中心點(diǎn)transform-origin)、動(dòng)畫(huà)、3D、案例（兩面翻轉(zhuǎn)的盒子、3D導(dǎo)航欄、旋轉(zhuǎn)木馬案例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
