一、CSS3 2D變形(利用Transfrom方法)
1、rotate(angle)
元素順時針旋轉(zhuǎn)給定的角度。允許負值,元素將逆時針旋轉(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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
效果如圖
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826200905768.png#pic_center)
如果當rotate里面的值為負數(shù)時,比如ratate(-10deg),效果如圖:
2、 translate(x,y)方法
通過 translate() 方法,元素從其當前位置移動,根據(jù)給定的 left(x 坐標) 和 top(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: translate(20px, 20px);
}
</style>
<body>
<div></div>
</body>
</html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
效果如下
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826202006692.png#pic_center)
初次之外還有其他的參數(shù)
transform: translate(200px);
如果只帶一個參數(shù),這個參數(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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
效果如圖
![在這里插入圖片描述](https://img-blog.csdnimg.cn/2020082620240536.png#pic_center)
可以看到,長邊變?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;改變中心點位置為左上角,當然還可以自由搭配,右下(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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
效果如圖
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826203228728.png#pic_center)
意思就是:圍繞 X 軸把元素翻轉(zhuǎn) 30 度,圍繞 Y 軸翻轉(zhuǎn) 30 度??赡芸雌饋肀容^抽象
transform: skew(230deg);如果只帶一個參數(shù),只有x軸方向的扭曲
transform: skewX(230deg); 對X軸進行翻轉(zhuǎn)
transform: skewY(230deg); 對Y軸進行翻轉(zhuǎn)
其實還是很好理解的,比如兩個圖疊加在一起
<!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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826213249143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODkwMTc3,size_16,color_FFFFFF,t_70#pic_center)
可以看到,所謂的X軸翻轉(zhuǎn),其實就是x方向的移動,上面的線向左移動5px,下面的線向右移動5px,加入Y也一樣
比如:transform: skew(0deg,5deg);
![在這里插入圖片描述](https://img-blog.csdnimg.cn/2020082621345691.png#pic_center)
左邊的線向上移動5px,右邊的線向下移動5px,同時改變時 transform: skew(5deg,5deg);
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826213609778.png#pic_center)
最好記的方式就是對角線的同時移動,左上右下是排斥,左下右上是吸引
5、matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個參數(shù),包含數(shù)學函數(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)
計算方法
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826203824908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODkwMTc3,size_16,color_FFFFFF,t_70#pic_center)
效果如圖
6、transform-origin 屬性
允許你改變被轉(zhuǎn)換元素的位置
語法: transform-origin: x-axis y-axis z-axis;
屬性值:
x-axis :定義視圖被置于 X 軸的何處。可能的值:left,center,right,length,%。
y-axis :定義視圖被置于 Y 軸的何處??赡艿闹担簍op,center,bottom,length,%。
z-axis :定義視圖被置于 Z 軸的何處??赡艿闹担簂ength。
<!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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
效果如圖
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20200826204115124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODkwMTc3,size_16,color_FFFFFF,t_70#pic_center)
形象的來說,就是規(guī)定你從哪個角開始旋轉(zhuǎn),比如規(guī)定右下角旋轉(zhuǎn),則圖形以右下角為旋轉(zhuǎn)角,順時針旋轉(zhuǎn)60°
二、CSS3 3D變形
1、perspective屬性
perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。
注釋:perspective 屬性只影響 3D 轉(zhuǎn)換元素。
語法: perspective: number|none;
屬性值:
number :元素距離視圖的距離,以像素計。
none :默認值。與 0 相同。不設置透視
<!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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
效果如圖
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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
效果如圖
3、CSS3過渡
transition 屬性是一個簡寫屬性,用于設置四個過渡屬性:
transition-property:規(guī)定設置過渡效果的 CSS 屬性的名稱。
transition-duration:規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function:規(guī)定速度效果的速度曲線。
transition-delay:定義過渡效果何時開始。
注釋:請始終設置 transition-duration 屬性,否則時長為 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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
或者
<!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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
可以自行實驗一下
4、CSS3動畫
使用@keyframes
通過 @keyframes 規(guī)則,您能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中,您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間,或者通過關鍵詞 “from” 和 “to”,等價于 0% 和 100%。
0% 是動畫的開始時間,100% 動畫的結(jié)束時間。
為了獲得最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關鍵幀動畫</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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關鍵幀動畫</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>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
animation:move 5s ease-in-out 500ms 2 alternate
move:表示animation-name ,動畫名稱
5s:表示animation-duration,時長
ease-in-out:表示animation-timing-function 規(guī)定動畫的速度曲線
(
除此以外還有:
linear:動畫從頭到尾的速度是相同的。
ease:默認。動畫以低速開始,然后加快,在結(jié)束前變慢。
ease-in:動畫以低速開始。
ease-out:動畫以低速結(jié)束。
ease-in-out:動畫以低速開始和結(jié)束。
)
500ms:表示animation-delay,規(guī)定在動畫開始之前的延遲。
2 :表示animation-iteration-count,規(guī)定動畫應該播放的次數(shù)。
alternate:表示animation-direction,規(guī)定是否應該輪流反向播放動畫,如果 animation-direction 值是 “alternate”,則動畫會在奇數(shù)次數(shù)(1、3、5 等等)正常播放,而在偶數(shù)次數(shù)(2、4、6 等等)向后播放。。
藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。