- A+
所属分类：Web前端
使用translate控制元素二维移动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-200px; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transition:1s; } main:hover div:nth-child(2){ transform:translateX(100px); transform:translateX(-200px); /* 百分比是参考元素本身宽度 */ transform:translateX(-200%); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
多条规则注意事项与二维移动统一控制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-200px; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transition:1s; } main:hover div:nth-child(2){ transform:translateX(200px) translateY(200%); /* 简写 */ transform:translate(100px,100%); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
控制元素居中的多种技巧分析：
【方式1，display:flex】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; /* top:50%; left:50%; margin-top:-200px; margin-left:-200px; */ } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transition:1s; } main:hover div:nth-child(2){ } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
【方式2：绝对定位】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; /* display:flex; justify-content:center; align-items:center; */ } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-top:-200px; margin-left:-200px; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transition:1s; } main:hover div:nth-child(2){ } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
【方式3：绝对定位+translate】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; /* display:flex; justify-content:center; align-items:center; */ } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transition:1s; } main:hover div:nth-child(2){ } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
体验三维Z轴的效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; transform:perspective(900px) rotateY(45deg); } div:nth-child(2){ background:lightblue; transform:perspective(900px) rotateY(45deg); } main:hover div:nth-child(1){ transform:perspective(900px) rotateY(45deg) translateZ(-200px); } main:hover div:nth-child(2){ transform:perspective(900px) rotateY(45deg) translateZ(200px); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
注意Z轴移动只能是具体的单位，不能是百分比
使用translate3d控制3D移动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; transform:perspective(900px) rotateY(45deg) translate3d(0,0,0); } div:nth-child(2){ background:lightblue; transform:perspective(900px) rotateY(45deg) translate3d(0,0,0); } main:hover div:nth-child(1){ transform:perspective(900px) rotateY(45deg) translate3d(0,0,-200px); } main:hover div:nth-child(2){ transform:perspective(900px) rotateY(45deg) translate3d(0,0,200px); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
漂亮的动感表单效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; justify-content:center; align-items:center; } .field{ position:relative; overflow:hidden; margin-bottom:20px; } .field::before{ content:''; position:absolute; left:0; bottom:0; height:2px; right:0; background-image:linear-gradient(to right,white,lightblue,pink, lightgreen,white); transform:translateX(-100%); transition:2s; } .field:hover::before{ transform:translateX(100%); } .field input{ border:none; outline:none; padding:10px; background:#f3f3f3; } </style> </head> <body> <main> <div class="field"><input type="text" placeholder="请输入账号"></div> <div class="field"><input type="text" placeholder="请输入密码"></div> </main> </body> </html>
超酷的移动端视图切换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; flex-direction:column; } main{ flex:1; } nav{ height:8vh; background:lightblue; display:flex; justify-content:space-evenly; align-items:center; } nav a{ text-decoration: none; color:white; text-transform:uppercase; flex:1; text-align:center; } nav a:nth-child(2){ border-left:1px solid white; border-right:1px solid white; } </style> </head> <body> <main></main> <nav> <a href="">home</a> <a href="">video</a> <a href="">live</a> </nav> </body> </html>
移动端多视图切换呈现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="fa/css/font-awesome.css"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; flex-direction:column; background:red; } body::after{ content:'cyy'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2em; opacity:.3; } main{ flex:1; position:relative; } nav{ height:8vh; background:lightblue; display:flex; justify-content:space-evenly; align-items:center; } nav a{ text-decoration: none; color:white; text-transform:uppercase; flex:1; text-align:center; } nav a:nth-child(2){ border-left:1px solid white; border-right:1px solid white; } main>div{ width:100%; height:100%; position:absolute; left:0; top:0; display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; transform:translateY(-100%); transition:1s; z-index:1; } main>div:target{ transform:translateY(0); } /* :target被点击触发时 */ main>div:nth-child(1):target{ background:#ddd; } main>div:nth-child(2):target{ background:orange; } main>div:nth-child(3):target{ background:lightgreen; } i[class^='fa']{ font-size:6em; color:white; } </style> </head> <body> <main> <div id="home"><i class="fa fa-home"></i></div> <div id="video"><i class="fa fa-ban"></i></div> <div id="live"><i class="fa fa-camera"></i></div> </main> <nav> <a href="#home">home</a> <a href="#video">video</a> <a href="#live">live</a> </nav> </body> </html>
2D缩放使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; } main:hover div:nth-child(1){ } main:hover div:nth-child(2){ transform:scaleX(2); transform:scaleY(.5); transform:scale(2,.5); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
3D视图中Z轴缩放使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } body{ width:100vw; height:100vh; } main{ position:absolute; width:400px; height:400px; border:1px solid pink; left:50%; top:50%; transform:translate(-50%,-50%) perspective(900px) rotateY(45deg); transform-style:preserve-3d; transition:1s; } body:hover main{ /* 把Z轴变长 */ transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(3); /* 把Z轴变短 */ transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(.5); } div{ width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:1s; } div:nth-child(1){ background:lightblue; } div:nth-child(2){ background:#ddd; } main:hover div:nth-child(2){ transform:translateZ(-400px); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
使用slace3d同时改变三轴缩放：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; } body{ width:100vw; height:100vh; } main{ position:absolute; width:400px; height:400px; border:1px solid pink; left:50%; top:50%; transform:translate(-50%,-50%) perspective(900px) rotateY(45deg); transform-style:preserve-3d; transition:1s; } body:hover main{ transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scale3d(2,2,2); } div{ width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:1s; } div:nth-child(1){ background:lightblue; } div:nth-child(2){ background:#ddd; } main:hover div:nth-child(2){ transform:translateZ(-400px); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
开发缩放菜单案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } ul{ display:flex; list-style:none; } ul li{ margin-right:10px; } ul li strong{ padding:5px 30px; text-transform:uppercase; background:lightgreen; color:white; cursor:pointer; } strong+div{ background:#ddd; padding:10px; display:flex; flex-direction:column; transform:scale(0); transition:.5s; position:relative; z-index:-1; transform-origin:center top; } strong+div>a{ color:#333; padding:5px 0; text-decoration:none; } ul li:hover strong+div{ transform:scale(1); } </style> </head> <body> <main> <ul> <li> <strong>video</strong> <div> <a href="">html</a> <a href="">css</a> </div> </li> <li> <strong>live</strong> <div> <a href="">js</a> <a href="">jq</a> </div> </li> </ul> </main> </body> </html>
图集效果案例：
【鼠标移入，放大元素】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; background:#ddd; } main{ display:flex; justify-content:center; align-items:center; } div{ width:200px; height:200px; margin-right:20px; overflow:hidden; border:1px solid #eee; transition:1s; } div>img{ height:100%; cursor:pointer; } main:hover div{ /* 滤镜：高斯模糊 */ filter:blur(5px); transform:scale(.6); } main:hover div:hover{ filter:none; transform:scale(1.6); } </style> </head> <body> <main> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020760089&di=7dea6c630e281d32d2e9d43ec9447024&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144625_tyEUV.thumb.400_0.jpeg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020764640&di=da5cbad756be09978194787be4c88324&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F05%2F20200305152336_HzjWi.thumb.400_0.jpeg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020833326&di=d4c101472a43d47d574fab6a3327d98e&imgtype=0&src=http%3A%2F%2Fm.imeitou.com%2Fuploads%2Fallimg%2F2020100608%2Fh2ohk0shtuw.jpg" alt=""></div> </main> </body> </html>
【鼠标移入，放大图片】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="关键词1，关键词2，关键词3"> <meta name="description" content="网站描述bla bla"> <title>网站标题</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; background:#ddd; } main{ display:flex; justify-content:center; align-items:center; } div{ width:200px; height:200px; margin-right:20px; overflow:hidden; border:1px solid #eee; } div>img{ height:100%; cursor:pointer; transition:1s; filter:blur(2px); } img:hover{ transform:scale(1.6); filter:none; } </style> </head> <body> <main> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020760089&di=7dea6c630e281d32d2e9d43ec9447024&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144625_tyEUV.thumb.400_0.jpeg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020764640&di=da5cbad756be09978194787be4c88324&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F05%2F20200305152336_HzjWi.thumb.400_0.jpeg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020833326&di=d4c101472a43d47d574fab6a3327d98e&imgtype=0&src=http%3A%2F%2Fm.imeitou.com%2Fuploads%2Fallimg%2F2020100608%2Fh2ohk0shtuw.jpg" alt=""></div> </main> </body> </html>
按X轴旋转物体与透视查看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; transform:perspective(900px) rotateX(-45deg); /* 3d透视，能看到z轴的内容 */ transform-style:preserve-3d; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } main:hover div:nth-child(1){ transform:perspective(900px) rotateX(90deg); } </style> </head> <body> <main> <div></div> </main> </body> </html>
YZ轴旋转操作体验：
【y轴】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; transform:perspective(900px) rotateY(-45deg); /* 3d透视，能看到z轴的内容 */ transform-style:preserve-3d; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } main:hover div:nth-child(1){ transform:perspective(900px) rotateY(90deg); } </style> </head> <body> <main> <div></div> </main> </body> </html>
【z轴】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; transform:perspective(900px) rotateY(-45deg); /* 3d透视，能看到z轴的内容 */ transform-style:preserve-3d; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } main:hover div:nth-child(1){ transform:perspective(900px) rotateZ(90deg); } </style> </head> <body> <main> <div></div> </main> </body> </html>
平面2d旋转：rotate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; transform:perspective(900px) rotateY(-45deg); /* 3d透视，能看到z轴的内容 */ transform-style:preserve-3d; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } main:hover div:nth-child(1){ transform:perspective(900px) rotate(390deg); } </style> </head> <body> <main> <div></div> </main> </body> </html>
rotate3d控制3d向量旋转：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vh; } main{ width:400px; height:400px; border:1px solid silver; position:absolute; top:50%; left:50%; margin-left:-200px; margin-top:-200px; transform:perspective(900px) rotateY(-45deg); /* 3d透视，能看到z轴的内容 */ transform-style:preserve-3d; } div{ width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; transition:1s; } div:nth-child(1){ background:pink; } main:hover div:nth-child(1){ /* x轴旋转 */ transform:perspective(900px) rotate3d(1,0,0,90deg); /* y轴旋转 */ transform:perspective(900px) rotate3d(0,1,0,90deg); /* z轴旋转 */ transform:perspective(900px) rotate3d(0,0,1,90deg); /* 对角线旋转 */ transform:perspective(900px) rotate3d(1,1,0,90deg); transform:perspective(900px) rotate3d(1,0,1,90deg); } </style> </head> <body> <main> <div></div> </main> </body> </html>
参数叠加与顺序对变形结果的影响：
参数不会叠加，后面的会覆盖掉前面的 ；
顺序不同，变形结果也不同；
