2D 3D轉化和動畫
day 9.10 2D、3D轉化和動畫 一、2D轉化 屬性：transform：translate（）/scale（）/rotate（）/skew（）/
1）取值：translate（x水平方向，y垂直方向）平移 將元素按指定的方向平移移動,相當於定位中的relative。（可以為負值，也可以是百分比） translateX()：水平方向移動一個物件。對像只向X軸進行移動，如果值為正值，對像向右移動；如果值為負值，對像向左移動。 translateY()：縱軸方向移動一個物件。物件只向Y軸進行移動，如果值為正值，物件向下移動；如果值為負值，對像向上移動。 這兩個函式和前面介紹的translate()函式不同的是每個方法只接受一個值。所以， transform:translate(-100px,0)實際上等於transform:translateX(-100px); transform:translate(0,-100px)實際上等於transform:translateY(-100px)。 2）取值：scale（）縮放（沒有單位，可設定一個值）讓元素根據中心原點對物件進行縮放。預設值為1。因此0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大。 縮放scale()函式和translate()函式的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值預設與第一個值相等。例如，scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。 scaleX()：相當於scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其預設值是1。 scaleY()：相當於scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其預設值是１。 3）取值：rotate（水平 180deg，垂直 180deg）（可設定一個值，表示水平垂直旋轉 ） 在平面裡面旋轉 transform: rotateX(60deg) 繞著x軸旋轉 transform: rotateY(60deg) 繞著y軸旋轉 預設是根據中心原點旋轉的。注意（transform-origin改變旋轉元素的旋轉基點。取值：left top 左上角；left bottom 左下腳；left 左邊的中間；right top 右上角；right 右邊的中間；right bottom 右下角） 4）取值；skew（xdeg，ydeg） 翻轉，扭曲； 此知識點座標軸有改變，垂直的是X軸，水平的是Y軸。 transform：skew（xdeg，ydeg）； transform：skewX（）； transform：skewY（）； 如果ydeg值為正數時，順時針旋轉，負值就是逆時針旋轉。 如果xdeg的值為正數的時候，逆時針旋轉，負數就是順時針旋轉 二、3D轉換transform 1）3D移動：translate3d() 注意：在顯示3D時，必須要給父元素添上這兩個屬性，不然看不到3D的效果 transform-style：preserve-3d； perspective：value（隨便取值，離看螢幕的距離，不能小於父元素的大小） 作用：使元素在這三個緯度中移動。 語法： （1）translate3d(x,y,z) （2）translateX(x),translateY(y),translateZ(z) 2）3D縮放：scale3d() 作用：使元素在這三個緯度中縮放。 語法： （1）scale3d(x,y,z) （2）scaleX(x),scaleY(y),scaleZ(z)（）z軸看不出什麼效果 3）3.3D旋轉:rotate3d() 作用：使元素在這三個緯度中旋轉。 語法： （1）rotate3d(x,y,z,angle)：指定需要進行旋轉的座標軸transform：rotate3d（1，1，0，45deg）；X軸和Y軸方向同時進行旋轉 4）元素的基點位置，也就是觀察位置。 perspective-origin: (left/center/right/value top/center/bottom/value) perspective-origin: left -300px; （2）rotateX(angle)，rotateY(angle) ，rotateZ(angle) 三、動畫（重要） 1、建立動畫 @keyframes move { 0% {} 100% { transform: translateX(700px); } 2、使用動畫 animation animation的取值： 1）動畫名稱 animation-name: move（可隨便取）; 2）動畫所需要時間 animation-duration: 2s; 3）延遲幾秒開始運動 animation-delay: 1s; 4）運動效果 animation-timing-function: ease; 5）規定動畫的次數 animation-iteration-count: 2; (1)infinite 迴圈播放（2）value(數字) 6）規定是否輪流反向播放動畫 animation-direction: alternate-reverse; 1）reverse 反向播放（2）alternate 動畫在奇數次的時候正向播放，在偶數次的時候反向播放，（3）alternate-reverse動畫在奇數次的時候反向播放，在偶數次的時候正向播放（4）normal預設值，動畫按正常播放 7）動畫完成時，要應用的樣式 animation-fill-mode: both; (1)forwards 動畫完成時，停留在最後位置 8）讓動畫停止 animation-play-state: paused 總寫：animation: name duration timing-function delay iteration-count direction fill-mode; 四、補充 1、旋轉之後，在移動會有問題，如果出現需要移動又有旋轉的時候，要先移動在旋轉。 2、transition 和 animation的區別 相同點：都是隨著時間改變元素的屬性值。 不同點：transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性； 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值。 案例：
1.時鐘案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; position: relative; border: 8px solid #ccc; box-sizing: border-box; border-radius: 50%; margin: 100px auto; } .line { width: 4px; height: 192px; position: absolute; background-color: #ccc; left: 50%; margin-left: -2px; } .line:nth-child(1) { transform: rotate(0deg); } .line:nth-child(2) { transform: rotate(30deg); } .line:nth-child(3) { transform: rotate(60deg); } .line:nth-child(4) { transform: rotate(90deg); } .line:nth-child(5) { transform: rotate(120deg); } .line:nth-child(6) { transform: rotate(150deg); } .mark { width: 170px; height: 170px; position: absolute; border-radius: 50%; background-color: white; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hour { position: absolute; width: 10px; height: 60px; left: 50%; margin-left: -5px; top: 35px; background-color: red; transform-origin: center bottom; animation: move 43200s linear infinite; } .minuter { position: absolute; width: 8px; height: 70px; left: 50%; margin-left: -4px; top: 25px; background-color: blue; transform-origin: center bottom; animation: move 3600s infinite; } .second { position: absolute; width: 4px; height: 85px; left: 50%; top: 15px; margin-left: -2px; background-color: yellow; transform-origin: center bottom; animation: move 60s infinite steps(60); } .mark1 { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: aqua; top: 50%; left: 50%; transform: translate(-50%, 0); } @keyframes move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="line"></div> <div class="mark"></div> <div class="hour"></div> <div class="minuter"></div> <div class="second"></div> <div class="mark1"></div> </div> </body> </html>
2.撲克牌旋轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { margin: 300px auto; width: 400px; position: relative; } img { width: 100px; position: absolute; top: 0; left: 0; /* transform: translate(-50%, -50%); */ transform-origin: right bottom; transition: all 2s linear; } section:hover img:nth-child(1) { transform: rotate(60deg); } section:hover img:nth-child(2) { transform: rotate(120deg); } section:hover img:nth-child(3) { transform: rotate(180deg); } section:hover img:nth-child(4) { transform: rotate(240deg); } section:hover img:nth-child(5) { transform: rotate(300deg); } section:hover img:nth-child(6) { transform: rotate(360deg); } </style> </head> <body> <section> <img src="../images/pk1.png" alt=""> <img src="../images/pk2.png" alt=""> <img src="../images/pk1.png" alt=""> <img src="../images/pk2.png" alt=""> <img src="../images/pk1.png" alt=""> <img src="../images/pk2.png" alt=""> </section> </body> </html>
3.動起來的立方體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,
li {
list-style: none;
}
ul {
margin: 200px auto;
position: relative;
width: 400px;
height: 400px;
transform-style: preserve-3d;
perspective: 1000px;
transform: rotateX(45deg) rotateY(45deg);
animation: move 2s linear infinite alternate;
}
li {
width: 300px;
height: 300px;
position: absolute;
text-align: center;
line-height: 300px;
font-size: 50px;
font-weight: 900;
top: 0;
left: 0;
opacity: 0.5;
}
li:nth-child(1) {
transform: translateZ(150px);
background: blue;
}
li:nth-child(2) {
transform: translateZ(-150px);
background: pink;
}
li:nth-child(3) {
transform: translateX(150px) rotateY(90deg);
background: rgb(61, 177, 61);
}
li:nth-child(4) {
transform: translateX(-150px) rotateY(-90deg);
background: rgb(209, 209, 60);
}
li:nth-child(5) {
transform: translateY(150px) rotateX(-90deg);
background: purple;
}
li:nth-child(6) {
transform: translateY(-150px) rotateX(90deg);
background: rgb(80, 3, 153);
}
@keyframes move {
0% {}
100% {
transform: rotateX(360deg) rotateY(45deg);
}
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>4.宇宙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
background: black;
position: relative;
}
li {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border-radius: 50%;
border: 1px solid white;
animation: move 4s linear infinite;
}
li span {
display: block;
width: 15px;
height: 15px;
background: yellow;
border-radius: 50%;
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
span i {
display: block;
width: 8px;
height: 8px;
background: honeydew;
border-radius: 50%;
position: absolute;
top: -8px;
}
li .list {
animation: move 6s linear infinite;
}
li:nth-child(1) {
height: 350px;
width: 350px;
}
li:nth-child(2) {
height: 300px;
width: 300px;
animation-duration: 6s;
}
li:nth-child(3) {
height: 250px;
width: 250px;
animation-duration: 10s;
}
li:nth-child(4) {
height: 200px;
width: 200px;
animation-duration: 15s;
}
li:nth-child(5) {
height: 150px;
width: 150px;
animation-duration: 21s;
}
li:nth-child(6) {
height: 100px;
width: 100px;
animation-duration: 28s;
}
li:nth-child(7) {
height: 50px;
width: 50px;
background: yellow;
}
@keyframes move {
0% {}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes move1 {
0% {}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<ul>
<li>
<span></span>
</li>
<li>
<span class="list">
<i></i>
</span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
<li>
<span>
</span>
</li>
<li>
</li>
</ul>
</body>
</html>