2023-4-26 前端達(dá)人
一、CSS3 2D變形（利用Transfrom方法）
1、rotate（angle）
元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
transform: rotate(30deg) ;
margin: 200px auto;
}
</style>
<body>
<div>
</div>
</body>
</html>
效果如圖
如果當(dāng)rotate里面的值為負(fù)數(shù)時(shí)，比如ratate（-10deg），效果如圖：
2、 translate(x,y)方法
通過 translate() 方法，元素從其當(dāng)前位置移動，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。也就是相對于頁面左部和頂部的距離
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: translate(20px, 20px); } </style> <body> <div></div> </body> </html>
效果如下
初次之外還有其他的參數(shù)
transform: translate(200px);
如果只帶一個(gè)參數(shù)，這個(gè)參數(shù)代表的是x方向位移值，y方向位移為0
transform: translateX(200px);
對X方向移動
transform: translateY(200px);
對Y方向移動
3、scale() 方法
通過 scale() 方法，元素的尺寸會增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: scale(2,0.5); margin: 20px auto; } </style> <body> <div></div> </body> </html>
效果如圖
可以看到，長邊變?yōu)榱嗽瓉淼膬杀?，寬邊變?yōu)榱嗽瓉淼?.5倍
transform: scale(1.5)；x軸和y軸都放大1.5倍
transform: scaleX(1.5)；x軸放大1.5倍
transform: scaleY(1.5)；y軸放大1.5倍
transform-origin: left top;改變中心點(diǎn)位置為左上角，當(dāng)然還可以自由搭配，右下（right bottom），右上（right top）
4、 skew() 方法
通過 skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div { width: 100px; height: 100px; border: 1px solid red; transform: skew(30deg,30deg); margin: 200px auto; } </style> <body> <div></div> </body> </html>
效果如圖
意思就是：圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 30 度?？赡芸雌饋肀容^抽象
transform: skew(230deg);如果只帶一個(gè)參數(shù)，只有x軸方向的扭曲
transform: skewX(230deg); 對X軸進(jìn)行翻轉(zhuǎn)
transform: skewY(230deg); 對Y軸進(jìn)行翻轉(zhuǎn)
其實(shí)還是很好理解的，比如兩個(gè)圖疊加在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; border: 1px solid red; transform: skew(5deg,0deg); } </style> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
可以看到，所謂的X軸翻轉(zhuǎn)，其實(shí)就是x方向的移動，上面的線向左移動5px，下面的線向右移動5px，加入Y也一樣
比如：transform: skew(0deg,5deg);
左邊的線向上移動5px，右邊的線向下移動5px，同時(shí)改變時(shí) transform: skew(5deg,5deg);
最好記的方式就是對角線的同時(shí)移動，左上右下是排斥，左下右上是吸引
5、matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動以及傾斜元素。
如題：將div右移100px,下移200px，旋轉(zhuǎn)30度，x軸縮放1.5倍，y軸縮放2倍。
（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);
（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)
計(jì)算方法
效果如圖
6、transform-origin 屬性
允許你改變被轉(zhuǎn)換元素的位置
語法： transform-origin: x-axis y-axis z-axis;
屬性值：
x-axis ：定義視圖被置于 X 軸的何處?？赡艿闹担簂eft，center，right，length，%。
y-axis ：定義視圖被置于 Y 軸的何處?？赡艿闹担簍op，center，bottom，length，%。
z-axis ：定義視圖被置于 Z 軸的何處。可能的值：length。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin</title> <style> *{ margin: 0; padding: 0; } .demo{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #000; } .box{ width: 200px; height: 200px; background-color: #f00; transform: rotate(60deg); transform-origin: right bottom; } </style> </head> <body> <div class="demo"> <div class="box"></div> </div> </body> </html>
效果如圖
形象的來說，就是規(guī)定你從哪個(gè)角開始旋轉(zhuǎn)，比如規(guī)定右下角旋轉(zhuǎn)，則圖形以右下角為旋轉(zhuǎn)角，順時(shí)針旋轉(zhuǎn)60°
二、CSS3 3D變形
1、perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉(zhuǎn)換元素。
語法： perspective: number|none;
屬性值：
number ：元素距離視圖的距離，以像素計(jì)。
none ：默認(rèn)值。與 0 相同。不設(shè)置透視
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>perspective</title> <style> .father{ position: relative; width: 200px; height: 200px; padding: 10px; margin: 200px auto; border: 1px solid #999; perspective: 150px; } .son{ width: 100px; height: 50px; padding: 50px; position: absolute; border: 1px solid #f00; background-color: #0ff; transform: rotateX(45deg); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
效果如圖
2、trasform-style屬性
transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。
注釋：該屬性必須與 transform 屬性一同使用。
語法： transform-style: flat|preserve-3d;
屬性值：
flat ：子元素將不保留其 3D 位置。
preserve-3d ：子元素將保留其 3D 位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-style</title> <style> .wrapper{ width: 200px; height: 100px; margin: 200px auto; } .div1,.div2{ width: 200px; height: 100px; padding: 20px; } .div1{ background-color: #f00; transform: rotateY(30deg); transform-style: preserve-3d; } .div2{ background-color: #655fff; transform: rotateY(45deg); } </style> </head> <body> <div class="wrapper"> <div class="div1">div1 <div class="div2">div2</div> </div> </div> </body> </html>
效果如圖
3、CSS3過渡
transition 屬性是一個(gè)簡寫屬性，用于設(shè)置四個(gè)過渡屬性：
transition-property：規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。
transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function：規(guī)定速度效果的速度曲線。
transition-delay：定義過渡效果何時(shí)開始。
注釋：請始終設(shè)置 transition-duration 屬性，否則時(shí)長為 0，就不會產(chǎn)生過渡效果。
語法： transition: property duration timing-function delay;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition-property: all; transition-duration: .8s; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition過渡動畫</title> <style> .box{ width: 100%; height: 300px; position: relative; border: 1px solid #eee; } .demo{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 100px; top: 100px; transform: rotate(0deg); transition: left 2s ease 500ms, width 5s ease-in-out; } .box:hover .demo{ left: 500px; width: 300px; transform: rotate(45deg); } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
可以自行實(shí)驗(yàn)一下
4、CSS3動畫
使用@keyframes
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 “from” 和 “to”，等價(jià)于 0% 和 100%。
0% 是動畫的開始時(shí)間，100% 動畫的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關(guān)鍵幀動畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { 0%{ left: 100px; } 45%{ left: 200px; top: 100px; background-color: #00f; } 75%{ left: 400px; top: 300px; background-color: #64ff77; } 100%{ left: 500px; top: 500px; background-color: #ff4975; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關(guān)鍵幀動畫</title> <style> .box{ width: 100%; height: 800px; position: relative; } .demo{ width: 100px; height: 100px; background-color: #ff0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; /*animation: move 5s ease-in-out infinite alternate ;*/ -webkit-animation: move 5s ease-in-out 500ms 2 alternate ; -moz-animation: move 5s ease-in-out 500ms 2 alternate ; -ms-animation: move 5s ease-in-out 500ms 2 alternate ; -o-animation: move 5s ease-in-out 500ms 2 alternate ; animation: move 5s ease-in-out 500ms 2 alternate ; } @keyframes move { from{ left: 100px; } to{ left: 500px; background-color: #00f; } } </style> </head> <body> <div class="box"> <div class="demo"></div> </div> </body> </html>
animation:move 5s ease-in-out 500ms 2 alternate
move：表示animation-name ，動畫名稱
5s：表示animation-duration，時(shí)長
ease-in-out：表示animation-timing-function 規(guī)定動畫的速度曲線
（
除此以外還有：
linear：動畫從頭到尾的速度是相同的。
ease：默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。
ease-in：動畫以低速開始。
ease-out：動畫以低速結(jié)束。
ease-in-out：動畫以低速開始和結(jié)束。
）
500ms：表示animation-delay，規(guī)定在動畫開始之前的延遲。
2 ：表示animation-iteration-count，規(guī)定動畫應(yīng)該播放的次數(shù)。
alternate：表示animation-direction，規(guī)定是否應(yīng)該輪流反向播放動畫，如果 animation-direction 值是 “alternate”，則動畫會在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）向后播放。。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn