css3 transform
属性:
translate:
含义:元素移动
用法:
- X轴上的移动,transform:translateX(...px/em/rem/%),百分比按元素的尺寸,可以任意单位;正数往右,负数往左;
- Y轴上的移动,transform:translateY(...px/em/rem/%),百分比按元素的尺寸,可以任意单位;正数往下,负数往上;
- 同时设置XY轴,transform:translate(X轴,Y轴)
- Z轴上的移动,transform:translateZ(...px/em/rem),不能设置百分比!正数往前,负数往后;(一般结合透视、旋转等才看到效果)
- 同时设置XYZ轴,transform3d:(X轴,Y轴,Z轴)
应用例子:
移动端多视图切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>移动端多视图切换</title> 7 <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"> 8 <style> 9 *{ 10 padding: 0; 11 margin:0; 12 box-sizing: border-box; 13 } 14 body{ 15 width: 100vw; 16 height: 100vh; 17 display: flex; 18 flex-direction: column; 19 } 20 body::after{ 21 content: '欢迎来到这个世界'; 22 left: 50%; 23 top: 50%; 24 position: absolute; 25 transform: translate(-50%,-50%);/*通过移动来居中*/ 26 font-size: 2em; 27 opacity: .3; 28 } 29 main{ 30 flex: 1; 31 position: relative; 32 } 33 nav{ 34 height: 8vh; 35 background: #34495e; 36 display: flex; 37 justify-content: center; 38 align-items: center; 39 } 40 nav a{ 41 text-decoration: none; 42 font-size: 1.2em; 43 color: white; 44 opacity: .8; 45 text-transform: uppercase; 46 flex: 1; 47 text-align: center; 48 } 49 nav a:nth-child(2){ 50 border-right: solid 1px silver; 51 border-left: solid 1px silver; 52 } 53 main>div{ 54 position: absolute; 55 left: 0; 56 top: 0; 57 width: 100%; 58 height: 100%; 59 display: flex; 60 flex-direction: column; 61 justify-content: center; 62 align-items: center; 63 transform: translateY(-100%);/*!往上移动,移出可视区域*/ 64 transition: 1s;/*加上过渡时间*/ 65 z-index: 1; 66 } 67 main>div:target{ 68 transform: translateY(0px);/*命中时,恢复位置*/ 69 } 70 main>div:nth-of-type(1):target{ 71 background: #27ae60; 72 } 73 main>div:nth-of-type(2):target{ 74 background: #e67e22; 75 } 76 main>div:nth-of-type(3):target{ 77 background: #2980b9; 78 } 79 i[class^="fa"]{ 80 font-size: 6em; 81 color: white; 82 } 83 </style> 84 </head> 85 <body> 86 <main> 87 <div id="home"> 88 <i class="fa fa-home" aria-haspopup="true"></i> 89 </div> 90 <div id="video"> 91 <i class="fa fa-pen" aria-haspopup="true"></i> 92 </div> 93 <div id="live"> 94 <i class="fa fa-camera" aria-haspopup="true"></i> 95 </div> 96 </main> 97 <nav> 98 <a href="#home">home</a> 99 <a href="#video">video</a> 100 <a href="#live">live</a> 101 </nav> 102 </body> 103 </html>
scale:
含义:元素缩放
用法:
- X轴上的缩放,transform:scaleX(num),水平放大/缩小 num 倍
- Y轴上的缩放,transform:scaleY(num),垂直放大/缩小 num 倍
- XY轴上的缩放,transform:scale(X轴,Y轴)
- Z轴上的缩放,transform:scaleZ(num),(一般结合透视、旋转等才看到效果),Z轴拉长/缩短 num 倍
- XYZ轴上的缩放,transform:scale3d(X轴,Y轴,Z轴)
应用例子:
图集效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>图集效果</title> 7 <style> 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 body{ 13 width: 100vw; 14 height: 100vh; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 background: #2c3e50; 19 } 20 main{ 21 display: flex; 22 justify-content: center; 23 align-items: center; 24 } 25 div{ 26 width: 200px; 27 height: 200px; 28 margin-right: 20px; 29 overflow: hidden; 30 border: solid 2px #95a5a6; 31 transition: 1s;/*对相册里每个元素进行变形的过渡*/ 32 } 33 div>img{ 34 height: 100%; 35 } 36 main:hover div{ 37 transform: scale(.6);/*当鼠标移入图册时,所有div都缩小且产生模糊效果*/ 38 filter: blur(15px); 39 } 40 main:hover div:hover{ 41 transform: scale(1.6);/*当鼠标移入某个图片时,对图片的div进行放大且取消模糊效果*/ 42 filter: none; 43 } 44 </style> 45 </head> 46 <body> 47 <main> 48 <div><img src="./img/adamcatlace.jpg"></div> 49 <div><img src="./img/tiger.jpg"></div> 50 <div><img src="./img/picture.jpg"></div> 51 </main> 52 </html>
rotate:
含义:元素旋转
用法:
- 沿着X轴旋转,transform:rotateX(...deg),加上透视效果更好,旋转90度时会消失,此时加上3d效果(transform:preserve-3d)能看到Z轴,从而处理这种状况
- 沿着Y轴旋转,transform:rotateY(...deg),加上透视效果更好,旋转90度时会消失,此时加上3d效果(transform:preserve-3d)能看到Z轴,从而处理这种状况
- 沿着Z轴(纵深轴)旋转,transform:rotateZ(...deg) 或者 transform:rotate(...deg),效果为在平面旋转
- 通过向量值旋转,transform:rotate3d(x,y,z,...deg) ,x:y:z算比例计算出轴的方向
应用例子:
网站动态LOGO
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>网站动态LOGO</title> 7 <style> 8 *{ 9 padding: 0; 10 margin: 0; 11 box-sizing: border-box; 12 } 13 body{ 14 width: 100vw; 15 height: 100vh; 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 background: #2c3e50; 20 } 21 main div{ 22 cursor: pointer; 23 color: #ecf0f1; 24 font-size: 2em; 25 } 26 main div>strong{ 27 display: inline-block; 28 transition: 1s;/*给元素设置过渡时间*/ 29 background: #000; 30 border-radius: 50%; 31 width: 45px; 32 height: 45px; 33 text-align: center; 34 } 35 main div:hover>strong:nth-of-type(1){ 36 transform: rotate(360deg);/*旋转*/ 37 background: #f1c40f; 38 } 39 main div:hover>strong:nth-of-type(2){ 40 transform: rotate(-360deg);/*旋转*/ 41 background: #1abc9c; 42 } 43 </style> 44 </head> 45 <body> 46 <main> 47 <div> 48 <strong>m</strong> 49 ai 50 <strong>z</strong> 51 iyin 52 </div> 53 </main> 54 </body> 55 </html>
skew:
含义:元素倾斜
用法:
- X轴倾斜,skewX(...deg),←X轴
- Y轴倾斜,skewY(...deg),↑Y轴
应用例子:
动态按钮
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>倾斜变形动态按钮</title> 7 <style> 8 *{ 9 border: 0; 10 margin: 0; 11 box-sizing: border-box; 12 } 13 body{ 14 width: 100vw; 15 height: 100vh; 16 background: #2c3e50; 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 } 21 main{ 22 width: 200px; 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 } 27 main a{ 28 color: #ecf0f1; 29 font-size: 1.5em; 30 text-decoration: none; 31 border: solid 3px #e74c3c; 32 flex: 1; 33 display: flex; 34 justify-content: center; 35 align-items: center; 36 height: 55px; 37 position: relative; 38 overflow: hidden;/*消除溢出,消除btn伪类的溢出*/ 39 } 40 .btn::after{ 41 content: ''; 42 width: 0;/*宽度为0,效果为消失不见*/ 43 height: 100%; 44 position: absolute; 45 transform: skew(45deg);/*增加伪类的倾斜效果*/ 46 background: #e74c3c; 47 z-index: -1; 48 transition: .3s;/*增加伪类的过渡效果*/ 49 } 50 .btn:hover::after{ 51 width: 200%;/*宽度变为父元素的两倍*/ 52 } 53 </style> 54 </head> 55 <body> 56 <main> 57 <a href="" class="btn"> 58 maiziyin 59 </a> 60 </main> 61 </body> 62 </html>
perspective:
含义:透视
用法:
- 单独给元素设置透视,transform:perspective(...px)
- 把多个子元素看成一个整体,统一给这个整体设置透视(统一看这个整体)。在子元素的父元素上添加perspective:...px,(只影响子元素,父元素没有透视)
- ...px单位指元素距离视图的距离,以像素计。
preserve-3d:
含义:产生三维空间,绘制Z轴
用法:transform-style:presrve-3d;
transform-origin:
含义:变形参考点
用法:
- 单边变形参考点:transfrom-origin:top/bottom/left/right
- 2D变形参考点:transfrom-origin:X(left/right/center/xx%/xxpx) Y (left/right/center/...%/...px)
- 3D变形参考点:transfrom-origin:X(left/right/center/xx%/xxpx) Y (left/right/center/...%/...px) Z(xxpx)
应用例子:
贺卡
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>贺卡</title> 7 <style> 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 body{ 13 width: 100vw; 14 height: 100vh; 15 display: flex; 16 justify-content: center; 17 align-items: center; 18 background: #2c3e50; 19 } 20 .card{ 21 width: 300px; 22 height: 200px; 23 background: #e67e22; 24 display: flex; 25 justify-content: center; 26 align-items: center; 27 font-size: 2em; 28 color: #ecf0f1; 29 position: relative; 30 transform-style: preserve-3d;/*绘制Z轴,否则翻转看不见Z轴上的立体效果*/ 31 transform: perspective(900px) rotateX(45deg);/*设置透视,再进行卡片的旋转*/ 32 } 33 .card::before,.card::after{ 34 content: ''; 35 background: #e74c3c; 36 width: 50%; 37 height: 100%; 38 position: absolute; 39 transition: 2s;/*设置过渡时间*/ 40 } 41 .card::before{ 42 content: '新年'; 43 left: 0; 44 top: 0; 45 display: flex; 46 align-items: center; 47 justify-content: flex-end; 48 transform-origin: left;/*设置旋转基点为左侧边*/ 49 border-right: solid 2px #e67e22; 50 box-sizing: border-box; 51 } 52 .card::after{ 53 content: '快乐'; 54 right: 0; 55 top: 0; 56 display: flex; 57 align-items: center; 58 justify-content: flex-start; 59 transform-origin: right;/*设置旋转基点为右侧边*/ 60 } 61 .card:hover::before{ 62 transform: rotateY(-180deg);/*设置左页往左旋转180度*/ 63 } 64 .card:hover::after{ 65 transform: rotateY(180deg);/*设置右页往右旋转180度*/ 66 } 67 </style> 68 </head> 69 <body> 70 <div class="card">maiziyin</div> 71 </body> 72 </html>
旋转菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>旋转菜单</title> 7 <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 list-style: none; 13 } 14 body{ 15 background: #2c3e50; 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 width: 100vw; 20 height: 100vh; 21 } 22 nav{ 23 width: 400px; 24 height: 400px; 25 26 position: relative; 27 display: flex; 28 justify-content: center; 29 align-items: center; 30 cursor: pointer; 31 } 32 nav::before{ 33 content: ''; 34 background: #e74c3c; 35 border-radius: 50%; 36 width: 200px; 37 height: 200px; 38 position: absolute; 39 } 40 nav::after{ 41 content: '菜单'; 42 background: #e74c3c; 43 border-radius: 50%; 44 width: 200px; 45 height: 200px; 46 position: absolute; 47 display: flex; 48 justify-content: center; 49 align-items: center; 50 font-size: 3em; 51 color: white; 52 } 53 nav:hover ul{ 54 transform: scale(1); 55 } 56 ul{ 57 transition: .5s; 58 transform: scale(0); 59 /* position: absolute; 60 left: 50%; 61 top: 50%; 62 transform: translate(-50%,-50%); */ 63 width: 300px; 64 height: 300px; 65 /* background: #000; */ 66 } 67 ul li{ 68 width: 80px; 69 height: 80px; 70 background: #e74c3c; 71 border-radius: 50%; 72 position: absolute; 73 display: flex; 74 justify-content: center; 75 align-items: center; 76 font-size: 3em; 77 color: white; 78 transition: 1s; 79 transform-origin: 150px 150px; 80 } 81 nav:hover li:nth-of-type(1){ 82 transform: rotate(40deg); 83 } 84 nav:hover li:nth-of-type(1) span{ 85 transform: rotate(320deg); 86 } 87 nav:hover li:nth-of-type(2){ 88 transform: rotate(80deg); 89 } 90 nav:hover li:nth-of-type(2) span{ 91 transform: rotate(280deg); 92 } 93 nav:hover li:nth-of-type(3){ 94 transform: rotate(120deg); 95 } 96 nav:hover li:nth-of-type(3) span{ 97 transform: rotate(240deg); 98 } 99 nav:hover li:nth-of-type(4){ 100 transform: rotate(160deg); 101 } 102 nav:hover li:nth-of-type(4) span{ 103 transform: rotate(200deg); 104 } 105 nav:hover li:nth-of-type(5){ 106 transform: rotate(200deg); 107 } 108 nav:hover li:nth-of-type(5) span{ 109 transform: rotate(160deg); 110 } 111 nav:hover li:nth-of-type(6){ 112 transform: rotate(240deg); 113 } 114 nav:hover li:nth-of-type(6) span{ 115 transform: rotate(120deg); 116 } 117 nav:hover li:nth-of-type(7){ 118 transform: rotate(280deg); 119 } 120 nav:hover li:nth-of-type(7) span{ 121 transform: rotate(80deg); 122 } 123 nav:hover li:nth-of-type(8){ 124 transform: rotate(3200deg); 125 } 126 nav:hover li:nth-of-type(8) span{ 127 transform: rotate(40deg); 128 } 129 nav:hover li:nth-of-type(9){ 130 transform: rotate(360deg); 131 } 132 133 </style> 134 </head> 135 <body> 136 <nav> 137 <ul> 138 <li> 139 <span> 140 <i class="fa fa-home" aria-haspopup="true"></i> 141 </span> 142 </li> 143 <li> 144 <span> 145 <i class="fa fa-home" aria-haspopup="true"></i> 146 </span> 147 </li> 148 <li> 149 <span> 150 麦 151 </span> 152 </li> 153 <li> 154 <span> 155 <i class="fa fa-home" aria-haspopup="true"></i> 156 </span> 157 </li> 158 <li> 159 <span> 160 <i class="fa fa-home" aria-haspopup="true"></i> 161 </span> 162 </li> 163 <li> 164 <span> 165 <i class="fa fa-home" aria-haspopup="true"></i> 166 </span> 167 </li> 168 <li> 169 <span> 170 <i class="fa fa-home" aria-haspopup="true"></i> 171 </span> 172 </li> 173 <li> 174 <span> 175 <i class="fa fa-home" aria-haspopup="true"></i> 176 </span> 177 </li> 178 <li> 179 <span> 180 <i class="fa fa-home" aria-haspopup="true"></i> 181 </span> 182 </li> 183 </ul> 184 </nav> 185 </body> 186 </html>
perspective-origin:
含义:透视基点(观看角度:元素不动,人的观察角度动)
用法:perspective-origin:X轴角度 Y轴角度
backface-visibitity:
含义:元素背面是否隐藏
用法:背面隐藏:backface-visibitity:hidden
应用例子:
登录注册切换页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>翻转切换页面</title> 7 <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 main{ 14 width: 100vw; 15 height: 100vh; 16 /* background: #000; */ 17 transform-style: preserve-3d; 18 transform: perspective(900px); 19 transition: 2s; 20 } 21 main.login{ 22 transform: perspective(900px) rotateY(0deg);/*旋转0度*/ 23 } 24 main.register{ 25 transform: perspective(900px) rotateY(180deg);/*旋转180度*/ 26 } 27 /* body:hover main{ 28 transform: perspective(900px) rotateY(180deg); 29 } */ 30 div{ 31 position: absolute; 32 width: 100%; 33 height: 100%; 34 background: #000; 35 display: flex; 36 flex-direction: column; 37 justify-content: center; 38 align-items: center; 39 font-size: 4em; 40 text-transform: uppercase; 41 color: white; 42 backface-visibility: hidden;/*背面隐藏*/ 43 44 } 45 div:nth-child(1){ 46 background: #8e44ad; 47 } 48 div:nth-child(2){ 49 background: #e74c3c; 50 transform: rotateY(180deg); 51 } 52 nav{ 53 position: absolute; 54 width: 100%; 55 bottom: 60px; 56 text-align: center; 57 } 58 nav a{ 59 padding: 10px 20px; 60 background: #34495e; 61 margin-right: 10px; 62 color: white; 63 text-decoration: none; 64 } 65 </style> 66 </head> 67 <body> 68 <main> 69 <div> 70 <i class="fa fa-home" aria-haspopup="true"></i> 71 login</div> 72 <div> 73 <i class="fa fa-user" aria-haspopup="true"></i> 74 register</div> 75 </main> 76 <nav> 77 <a href="javascript:;" onclick="change('login')">登录</a> 78 <a href="javascript:;" onclick="change('register')">注册</a> 79 </nav> 80 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script> 81 <script> 82 function change(t){ 83 switch(t){ 84 case 'login': 85 $('main').removeClass().addClass('login'); 86 break; 87 case 'register': 88 $('main').removeClass().addClass('register'); 89 break; 90 } 91 } 92 </script> 93 </body> 94 </html>