欢迎光临
我的个人博客网站

CSS3变形透视动画-3 -cyy


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>

CSS3变形透视动画-3 -cyy

 

 

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>

CSS3变形透视动画-3 -cyy

 

 

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>

CSS3变形透视动画-3 -cyy

 

还有一个平面版本:

<!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>

CSS3变形透视动画-3 -cyy

 

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>

CSS3变形透视动画-3 -cyy

 

 

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>

CSS3变形透视动画-3 -cyy

 

三维幻灯片:

<!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>

CSS3变形透视动画-3 -cyy

 

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>

CSS3变形透视动画-3 -cyy

 

如果旋转加在父元素上,需要设置三维效果
<!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>

CSS3变形透视动画-3 -cyy

 

移动端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>

CSS3变形透视动画-3 -cyy

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS3变形透视动画-3 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏