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

CSS3变形透视动画 -cyy

使用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>

CSS3变形透视动画 -cyy

 

 

多条规则注意事项与二维移动统一控制:

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

CSS3变形透视动画 -cyy

 

 

【方式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>

CSS3变形透视动画 -cyy

 

 

注意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>

CSS3变形透视动画 -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;         }       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>

CSS3变形透视动画 -cyy

 

 

超酷的移动端视图切换:

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

CSS3变形透视动画 -cyy

 

 

移动端多视图切换呈现:

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

CSS3变形透视动画 -cyy

 

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>

CSS3变形透视动画 -cyy

 

 

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>

CSS3变形透视动画 -cyy

 

使用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>

CSS3变形透视动画 -cyy

 

 

开发缩放菜单案例:

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

CSS3变形透视动画 -cyy

 

 

图集效果案例:

【鼠标移入,放大元素】

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

CSS3变形透视动画 -cyy

 

 

【鼠标移入,放大图片】

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

CSS3变形透视动画 -cyy

 

 

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

CSS3变形透视动画 -cyy

 

 

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>

CSS3变形透视动画 -cyy

 

 

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

CSS3变形透视动画 -cyy

 

 

平面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>

 

参数叠加与顺序对变形结果的影响:

参数不会叠加,后面的会覆盖掉前面的 ;

顺序不同,变形结果也不同;

 

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

评论 抢沙发

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

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

联系我们本站主机

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

支付宝扫一扫打赏

微信扫一扫打赏