一.空間轉(zhuǎn)換
1.目標(biāo)：使用transform屬性實(shí)現(xiàn)元素在空間內(nèi)的位移腌零、旋轉(zhuǎn)、縮放等效果
2.空間：是從坐標(biāo)軸角度定義的唆阿。 x 益涧、y 和z三條坐標(biāo)軸構(gòu)成了一個立體空間，z軸位置與視線方向相同驯鳖。
空間轉(zhuǎn)換也叫3D轉(zhuǎn)換
二.空間位移
1.目標(biāo)：使用translate實(shí)現(xiàn)元素空間位移效果
2.語法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
3.取值:像素單位數(shù)值,百分比(正負(fù)均可)
<title>空間位移</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}
.box:hover {
/* Z軸的正方向?yàn)槠聊坏饺搜劬Φ姆较?*/
/* 語法:transform: translateZ(); */
/* 網(wǎng)頁默認(rèn)顯示是2d的闲询，看不到3d效果的 */
/* transform: translateZ(300px); */
transform: translate3d(100px,100px,300px);
}
</style>
</head>
<body>
<div class="box"></div>
</body
三.透視效果
1.目標(biāo)：使用perspective屬性實(shí)現(xiàn)透視效果
2.默認(rèn)情況下,無法觀察到Z軸位移效果.因?yàn)?
Z軸是視線方向，移動效果應(yīng)該是距離的遠(yuǎn)或近浅辙， 電腦屏幕是平面扭弧，默認(rèn)無法觀察遠(yuǎn)近效果
3.屬性（添加給父級）
perspective: 值;
-
取值：像素單位數(shù)值， 數(shù)值一般在800 – 1200记舆。
透視距離也稱為視距泽腮，所謂的視距就是人的眼睛到屏幕的距離泊愧。
5.作用:空間轉(zhuǎn)換時鸽捻，為元素添加近大遠(yuǎn)小、近實(shí)遠(yuǎn)虛的視覺效果
2.png
<title>透視效果</title>
<style>
/* 透視，視距盛正，景深 設(shè)置給使用了3d元素的父元素（親爸爸） */
body {
/* pp給使用3D元素的最近一級父元素添加 */
/* 添加視距 取值范圍：400~1200px pp */
/* 視距:其實(shí)就是在取值的地方安排一只眼睛 */
perspective: 800px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}
.box:hover {
/* 3d的元素:包含X,Y,Z軸 */
transform: translateZ(200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
四.空間旋轉(zhuǎn)
1.目標(biāo)：使用rotate實(shí)現(xiàn)元素空間旋轉(zhuǎn)效果
2.語法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
3.左手法則:
判斷旋轉(zhuǎn)方向: 左手握住旋轉(zhuǎn)軸, 拇指指向正值方向, 手指彎曲方向?yàn)樾D(zhuǎn)正值方向
拓展
rotate3d(x, y, z, 角度度數(shù)) ：用來設(shè)置自定義旋轉(zhuǎn)軸的位置及旋轉(zhuǎn)的角度
x删咱，y，z 取值為0-1之間的數(shù)字
/* 順時針旋轉(zhuǎn) */
transform: rotateZ(360deg);
transform: rotate(360deg);
/* 逆時針旋轉(zhuǎn) */
transform: rotateZ(-360deg);
transform: rotate(-360deg);
盒子沿著Y軸旋轉(zhuǎn)90度,在空間中是一條線
立體空間中一個點(diǎn)和一條線是不占位置的 所以看不見
<title>空間旋轉(zhuǎn)-Y軸</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
/* 添加視距 */
perspective: 800px;
}
img {
width: 200px;
transition: all 2s;
}
.box img:hover {
/* 立體空間中一個點(diǎn)和一條線是不占位置的 所以看不見 */
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
沿著多條對稱軸旋轉(zhuǎn),屬性值用空格隔開
/* 屬性值空格隔開 */
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
五.立體呈現(xiàn)
1.目標(biāo)： 使用transform-style: preserve-3d呈現(xiàn)立體圖形
思考：使用perspective透視屬性能否呈現(xiàn)立體圖形豪筝？
答:不能,perspective只增加近大遠(yuǎn)小痰滋、近實(shí)遠(yuǎn)虛的視覺效果。
3.實(shí)現(xiàn)方法
添加 transform-style: preserve-3d;屬性 使子元素處于真正的3d空間
4.呈現(xiàn)立體圖形步驟
- 盒子父元素添加transform-style: preserve-3d续崖；
- 按需求設(shè)置子盒子的位置（位移或旋轉(zhuǎn)）
5.空間內(nèi)敲街，轉(zhuǎn)換元素都有自已獨(dú)立的坐標(biāo)軸，互不干擾
六.3D導(dǎo)航
1.實(shí)現(xiàn)思路
2.代碼
<title>3D導(dǎo)航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.box {
width: 300px;
height: 40px;
margin: 100px auto;
/* background-color: aqua; */
}
.box li {
width: 100px;
/* 高度必須給,如果不給li的高度就是80,旋轉(zhuǎn)時默認(rèn)旋轉(zhuǎn)點(diǎn)是盒子的中心點(diǎn),會導(dǎo)致整個li盒子往下掉20px*/
height: 40px;
/* background-color: pink; */
float: left;
/* 添加過渡 */
transition: 1s;
/* 開啟3d */
transform-style: preserve-3d;
/* 上帝視角 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.box li a {
display: block;
width: 100px;
height: 40px;
background-color:orange;
text-align: center;
line-height: 40px;
color: #fff;
}
.box li a:first-child {
background-color:green;
/* 2.綠色盒子沿著z軸正方向移動20px */
transform: translateZ(20px);
}
.box li a:last-child {
/* 1.橙色盒子往上走60px 然后沿著x軸正方向旋轉(zhuǎn)90° */
transform: translateY(-60px) rotateX(90deg);
}
.box li:hover {
/* 3.鼠標(biāo)懸停li 讓整個li沿著x軸負(fù)方向旋轉(zhuǎn)90度 */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">首頁</a>
<a href="#">index</a>
</li>
<li>
<a href="#">登錄</a>
<a href="#">login</a>
</li>
<li>
<a href="#">注冊</a>
<a href="#">register</a>
</li>
</ul>
</div>
</body>
七.動畫
1.目標(biāo)：使用animation添加動畫效果
- 動畫效果：實(shí)現(xiàn)多個狀態(tài)間的變化過程严望，動畫過程可控（重復(fù)播放多艇、最終畫面、是否暫停）
- 動畫的本質(zhì)是快速切換大量圖片時在人腦中形成的具有連續(xù)性的畫面
- 構(gòu)成動畫的最小單元：幀或動畫幀
2.動畫的實(shí)現(xiàn)步驟
2.1定義動畫
2.2使用動畫
<title>動畫實(shí)現(xiàn)步驟</title>
<style>
/* 注意點(diǎn):
1.動畫的名稱不能相同
2.可參與過渡的css屬性都可參與動畫
3.動畫名不能使用running
4.如果調(diào)用該動畫的盒子樣式和初始狀態(tài)是一樣的,可省略不寫
*/
.box1 {
width: 200px;
height: 100px;
background-color: skyblue;
/* 2.調(diào)用動畫 第一個參數(shù)是你定義的動畫名稱,第二個參數(shù)是動畫時長*/
animation: change 2s;
}
/* 一. 定義動畫：讓寬度從200變大到600 */
@keyframes change {
/* 初始狀態(tài) */
from{
width: 200px;
}
/* 結(jié)束狀態(tài) */
to{
width: 600px;
}
}
.box2 {
width: 200px;
height: 100px;
background-color: tomato;
/* 2.調(diào)用動畫 第一個參數(shù)是你定義的動畫名稱,第二個參數(shù)是動畫時長*/
animation: move 2s;
}
/* 二. 定義動畫：200*100 到 500*300 到 800*500 */
/* 1.定義動畫 百分比可以實(shí)現(xiàn)階段性的動畫 */
/* 百分比定義,可以讓動畫擁有多個狀態(tài) */
/* 百分比指的就是動畫執(zhí)行的某一點(diǎn) */
@keyframes move {
/* 初始狀態(tài) */
/* 如果調(diào)用該動畫的盒子樣式和初始狀態(tài)是一樣的,可省略不寫 */
0%{
width: 200px;
height: 100px;
}
/* 中間狀態(tài) */
50%{
width: 500px;
height: 300px;
border-radius: 50%;
background-color: hotpink;
border: 10px solid red;
}
/* 結(jié)束狀態(tài) */
100%{
width: 800px;
height: 500px;
background-color: green;
margin-left: 100px;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<br />
<br />
<div class="box2"></div>
</body>
注意點(diǎn):
1.動畫的名稱不能相同
2.可參與過渡的css屬性都可參與動畫
3.動畫名不能使用running
4.如果調(diào)用該動畫的盒子樣式和初始狀態(tài)是一樣的,可省略不寫
3.動畫的屬性
3.1目標(biāo)：使用animation相關(guān)屬性控制動畫執(zhí)行過程
注意：
- 動畫名稱和動畫時長必須賦值
- 取值不分先后順序
- 如果有2個時間值像吻，第一個時間表示動畫時長峻黍，第二個時間表示延遲時間
3.2屬性
3.3 補(bǔ)間動畫和逐幀動畫
- 補(bǔ)間動畫:動畫執(zhí)行過程中,沒有間隔
使用的速度曲線:默認(rèn)值為 ease; 勻速 linear - 逐幀動畫(精靈動畫):一步一步執(zhí)行動畫,中間會有間隔
使用速度曲線:steps(正整數(shù))
逐幀動畫通常配合精靈圖使用,又叫精靈動畫
屬性:animation-timing-function: steps(N)复隆；
3.4使用animation屬性給一個元素添加多個動畫效果
小案例
<title>Document</title>
<style>
* {
margin: 0;
height: ;
box-sizing: border-box;
}
.box {
width: 140px;
height: 140px;
/* 插入背景圖片 */
background: url(./images/bg.png);
/* 調(diào)用動畫 */
animation: run 1s steps(12) infinite, move 3s forwards linear;
}
/* 1.讓人物原地跑起來 */
/* 精靈圖全部動作參與動畫,往左走圖片的寬度 */
@keyframes run {
to{
background-position: -1680px 0;
}
}
/* 2.讓盒子往右走700px */
@keyframes move {
to{
transform: translate(700px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
