- A+
所属分类：Web前端
perspective透视规则与函数不同应用体验：
perspective加在父元素和加在子元素的区别：
加在父元素上是整体观察所有子元素，加在子元素上是独立观察子元素；
perspective规则和transform:perspective()函数的区别：
perspective加在父元素上，不影响父元素本身；
transform:perspective()函数会影响父元素本身
<!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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; /* perspective加在父元素上，就是整体观察所有子元素 */ /* 只影响整体子元素，不影响父元素本身 */ perspective:900px; border:3px solid red; /* 会影响父元素本身 */ transform:perspective(600px) rotateY(45deg); } div{ width:200px; height:200px; margin-right:100px; /* perspective(透视距离)，透视距离越小，透视越明显 */ /* transform:perspective()，独立观察子元素 */ transform:perspective(900px) rotateY(45deg); } 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>
preserve-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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; border:3px solid red; width:400px; height:300px; /* 设置3d效果 */ transform-style:preserve-3d; /* 给父元素加上透视和适当旋转，才能看到z轴的变化 */ transform:perspective(900px) rotateY(45deg); } div{ width:200px; height:200px; margin-right:100px; position:absolute; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; /* 三维空间需要操作z轴 */ transform:translateZ(300px); } main:hover div:nth-child(1){ } main:hover div:nth-child(2){ } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; border:3px solid red; width:200px; height:200px; transform-style:preserve-3d; transform:perspective(900px) rotateX(-45deg); transition:1s; transform-origin:center center -200px; } article{ width:400px; height:400px; border:1px solid red; display:flex; justify-content:center; align-items:center; } article:hover main{ transform:perspective(900px) rotateX(-45deg) rotateY(555deg); } div{ width:200px; height:200px; position:absolute; overflow:hidden; transform-origin:center center -200px; } div>img{ height:100%; } div:nth-child(1){ transform:rotateY(90deg); } div:nth-child(2){ transform:rotateY(180deg); } div:nth-child(3){ transform:rotateY(270deg); } div:nth-child(4){ transform:rotateY(360deg); } </style> </head> <body> <article> <main> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069498580&di=557f5cf3f788d1761e7b992aefeffc99&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fthumb150%2F6f807ba3gw1f4v0m2ll0bj20ku0ku77i.jpg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069499855&di=4526f815cf47b8fc29e2120fcd8f2144&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn23%2F400%2Fw600h600%2F20181023%2F2f0e-hmuuiyw6041112.jpg" alt=""></div> <div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809686336,965929022&fm=26&gp=0.jpg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069504608&di=e26f4483ed372b10a6e87626616620c1&imgtype=0&src=http%3A%2F%2Fpic.5577.com%2Fup%2F2017-7%2F15010420363446897.jpg%2521360_360" alt=""></div> </main> </article> </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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; border:3px solid red; width:200px; height:200px; transform-style:preserve-3d; transform:perspective(900px); transition:1s; transform-origin:center center -200px; } article{ width:400px; height:400px; border:1px solid red; display:flex; justify-content:center; align-items:center; } article:hover main{ transform:perspective(900px) rotateY(90deg); } div{ width:200px; height:200px; position:absolute; overflow:hidden; transform-origin:center center -200px; } div>img{ height:100%; } div:nth-child(1){ transform:rotateY(90deg); } div:nth-child(2){ transform:rotateY(180deg); } div:nth-child(3){ transform:rotateY(270deg); } div:nth-child(4){ transform:rotateY(360deg); } </style> </head> <body> <article> <main> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069498580&di=557f5cf3f788d1761e7b992aefeffc99&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fthumb150%2F6f807ba3gw1f4v0m2ll0bj20ku0ku77i.jpg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069499855&di=4526f815cf47b8fc29e2120fcd8f2144&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn23%2F400%2Fw600h600%2F20181023%2F2f0e-hmuuiyw6041112.jpg" alt=""></div> <div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809686336,965929022&fm=26&gp=0.jpg" alt=""></div> <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069504608&di=e26f4483ed372b10a6e87626616620c1&imgtype=0&src=http%3A%2F%2Fpic.5577.com%2Fup%2F2017-7%2F15010420363446897.jpg%2521360_360" alt=""></div> </main> </article> </body> </html>
perspective-origin 调整观看视角实例：
<!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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; border:3px solid red; width:400px; height:300px; transform-style:preserve-3d; perspective:900px; transition:2s; } body:hover main{ /* 物体本身移动 */ /* transform:rotateY(60deg); */ /* 视角移动 */ perspective-origin:center left; perspective-origin:2000px -300px; } div{ width:200px; height:200px; position:absolute; } div:nth-child(1){ background:pink; transform:rotateY(60deg); } div:nth-child(2){ background:lightblue; transform:rotateY(60deg) translateZ(-300px); } </style> </head> <body> <main> <div></div> <div></div> </main> </body> </html>
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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; /* border:3px solid #ddd; */ width:200px; height:200px; transform-style:preserve-3d; transform:perspective(900px); transition:2s; transform-origin:center center 100px; } body:hover main{ transform:perspective(900px) rotateY(150deg); } div{ width:200px; height:200px; position:absolute; background:#8bc34a; font-size:4em; display:flex; justify-content:center; align-items:center; transform-origin:center center 100px; opacity:.8; } div:nth-child(1){ background:#c34a8b; transform:rotateY(90deg); } div:nth-child(2){ background:#4a8bc3; transform:rotateY(180deg); } div:nth-child(3){ background:#8bc34a; transform:rotateY(270deg); } div:nth-child(4){ background:#4ac3bf; transform:rotateY(360deg); } div:nth-child(5){ background:#c34a4e; transform-origin:top; transform:rotateX(90deg); } div:nth-child(6){ background:#ff893b; transform-origin:bottom; transform:rotateX(-90deg); } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; /* border:3px solid #ddd; */ width:400px; height:200px; transform-style:preserve-3d; transform:perspective(900px); transition:4s; /* 左右旋转 */ transform-origin:200px center -100px; /* 上下旋转 */ transform-origin:200px 100px -100px; } body:hover main{ /* 左右旋转 */ transform:perspective(900px) rotateY(360deg); /* 上下旋转 */ transform:perspective(900px) rotateX(360deg); } div{ position:absolute; background:#8bc34a; font-size:4em; display:flex; justify-content:center; align-items:center; transform-origin:center center 100px; opacity:.8; } div:nth-child(1){ width:400px; height:200px; background:#c34a8b; } div:nth-child(2){ width:400px; height:200px; background:#4a8bc3; transform:translateZ(-200px); } div:nth-child(3){ width:200px; height:200px; background:#8bc34a; transform-origin:left; transform:rotateY(90deg); } div:nth-child(4){ width:200px; height:200px; background:#4ac3bf; transform-origin:right; transform:translateX(200px) rotateY(-90deg); } div:nth-child(5){ width:400px; height:200px; background:#c34a4e; transform-origin:top; transform:rotateX(-90deg); } div:nth-child(6){ width:400px; height:200px; background:#ff893b; transform-origin:bottom; transform:rotateX(90deg); } </style> </head> <body> <main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </main> </body> </html>
backface-visibility 控制元素背面隐藏效果：
<!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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; justify-content:center; align-items:center; border:3px solid red; width:400px; height:400px; perspective:900px; } body:hover main div:nth-child(1){ transform:rotateY(-180deg); } body:hover main div:nth-child(2){ transform:rotateY(0deg); } div{ width:200px; height:200px; position:absolute; display:flex; justify-content:center; align-items:center; transition:2s; /* 设置背面不可见 */ backface-visibility:hidden; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transform:rotateY(180deg); } </style> </head> <body> <main> <div>1</div> <div>2</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; background:#3848a2; display:flex; justify-content:center; align-items:center; } main{ display:flex; justify-content:center; align-items:center; border:3px solid red; width:400px; height:400px; perspective:900px; transition:2s; /* 如果旋转加在父元素上，需要设置三维效果 */ transform-style:preserve-3d; } body:hover main{ transform:rotateY(-180deg); } div{ width:200px; height:200px; position:absolute; display:flex; justify-content:center; align-items:center; /* 设置背面不可见 */ backface-visibility:hidden; } div:nth-child(1){ background:pink; } div:nth-child(2){ background:lightblue; transform:rotateY(180deg); } </style> </head> <body> <main> <div>1</div> <div>2</div> </main> </body> </html>
移动端3D登录注册切换页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> *{ margin:0; padding:0; box-sizing:border-box; } main{ width:100vw; height:100vh; transform-style:preserve-3d; transform:perspective(900px); transition:2s; } main.login{ transform:perspective(900px) rotateY(0deg); } main.register{ transform:perspective(900px) rotateY(180deg); } /* body:hover main{ transform:perspective(900px) rotateY(180deg); } */ div{ position: absolute; width:100%; height:100%; background:#000; display:flex; flex-direction:column; justify-content: center; align-items: center; font-size:4em; color:white; text-transform:uppercase; backface-visibility:hidden; transition:1s; } div:nth-child(1){ background:#8a4af3; } div:nth-child(2){ background:#f34a5e; transform:rotateY(180deg); } div span{ font-size:.3em; color:#ddd; } div i[class^='fa']{ font-size:1.5em; } nav{ width:100%; position:absolute; text-align:center; bottom:60px; } nav a{ padding:10px 20px; background:#666666; margin-right:10px; text-decoration: none; color:white; } </style> </head> <body> <main> <div> <i class="fa fa-home" aria-hidden="true"></i> login <span>cyy login</span> </div> <div> <i class="fa fa-user" aria-hidden="true"></i> register <span>cyy register</span> </div> </main> <nav> <a href="javascript:;" onclick="change('login')">登录</a> <a href="javascript:;" onclick="change('register')">注册</a> </nav> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <script> function change(t){ switch(t){ case 'login': $('main').removeClass().addClass('login'); break; case 'register': $('main').removeClass().addClass('register'); break; } } </script> </body> </html>
