经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS3变形透视动画 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/16 10:08:24　　对本文有异议

使用translate控制元素二维移动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.       main{
  14.             width:400px;
  15.             height:400px;
  16.             border:1px solid silver;
  17.             position:absolute;
  18.             top:50%;
  19.             left:50%;
  20.             margin-top:-200px;
  21.             margin-left:-200px;
  22.         }
  23.         div{
  24.             width:200px;
  25.             height:200px;
  26.             position:absolute;
  27.             top:50%;
  28.             left:50%;
  29.             margin-top:-100px;
  30.             margin-left:-100px;
  31.         }
  32.         div:nth-child(1){
  33.             background:pink;
  34.         }
  35.         div:nth-child(2){
  36.             background:lightblue;
  37.             transition:1s;
  38.         }
  39.         main:hover div:nth-child(2){
  40.             transform:translateX(100px);
  41.             transform:translateX(-200px);
  42.             /* 百分比是参考元素本身宽度 */
  43.             transform:translateX(-200%);
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <main>
  49.         <div></div>
  50.         <div></div>
  51.     </main>
  52. </body>
  53. </html>

 

 

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.       main{
  14.             width:400px;
  15.             height:400px;
  16.             border:1px solid silver;
  17.             position:absolute;
  18.             top:50%;
  19.             left:50%;
  20.             margin-top:-200px;
  21.             margin-left:-200px;
  22.         }
  23.         div{
  24.             width:200px;
  25.             height:200px;
  26.             position:absolute;
  27.             top:50%;
  28.             left:50%;
  29.             margin-top:-100px;
  30.             margin-left:-100px;
  31.         }
  32.         div:nth-child(1){
  33.             background:pink;
  34.         }
  35.         div:nth-child(2){
  36.             background:lightblue;
  37.             transition:1s;
  38.         }
  39.         main:hover div:nth-child(2){
  40.             transform:translateX(200px) translateY(200%);
  41.             /* 简写 */
  42.             transform:translate(100px,100%);
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <main>
  48.         <div></div>
  49.         <div></div>
  50.     </main>
  51. </body>
  52. </html>

 

控制元素居中的多种技巧分析：

【方式1，display:flex】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding: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.         }
  20.       main{
  21.             width:400px;
  22.             height:400px;
  23.             border:1px solid silver;
  24.             position:absolute;
  25.             /* top:50%;
  26.             left:50%;
  27.             margin-top:-200px;
  28.             margin-left:-200px; */
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.         }
  39.         div:nth-child(1){
  40.             background:pink;
  41.         }
  42.         div:nth-child(2){
  43.             background:lightblue;
  44.             transition:1s;
  45.         }
  46.         main:hover div:nth-child(2){
  47.             
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <main>
  53.         <div></div>
  54.         <div></div>
  55.     </main>
  56. </body>
  57. </html>

 

 

【方式2：绝对定位】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding: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.         }
  20.       main{
  21.             width:400px;
  22.             height:400px;
  23.             border:1px solid silver;
  24.             position:absolute;
  25.             top:50%;
  26.             left:50%;
  27.             margin-top:-200px;
  28.             margin-left:-200px;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.         }
  39.         div:nth-child(1){
  40.             background:pink;
  41.         }
  42.         div:nth-child(2){
  43.             background:lightblue;
  44.             transition:1s;
  45.         }
  46.         main:hover div:nth-child(2){
  47.             
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <main>
  53.         <div></div>
  54.         <div></div>
  55.     </main>
  56. </body>
  57. </html>

 

【方式3：绝对定位+translate】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding: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.         }
  20.       main{
  21.             width:400px;
  22.             height:400px;
  23.             border:1px solid silver;
  24.             position:absolute;
  25.             top:50%;
  26.             left:50%;
  27.             transform:translate(-50%,-50%);
  28.         }
  29.         div{
  30.             width:200px;
  31.             height:200px;
  32.             position:absolute;
  33.             top:50%;
  34.             left:50%;
  35.             margin-top:-100px;
  36.             margin-left:-100px;
  37.         }
  38.         div:nth-child(1){
  39.             background:pink;
  40.         }
  41.         div:nth-child(2){
  42.             background:lightblue;
  43.             transition:1s;
  44.         }
  45.         main:hover div:nth-child(2){
  46.             
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <main>
  52.         <div></div>
  53.         <div></div>
  54.     </main>
  55. </body>
  56. </html>

 

体验三维Z轴的效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             transform:translate(-50%,-50%);
  25.         }
  26.         div{
  27.             width:200px;
  28.             height:200px;
  29.             position:absolute;
  30.             top:50%;
  31.             left:50%;
  32.             margin-top:-100px;
  33.             margin-left:-100px;
  34.             transition:1s;
  35.         }
  36.         div:nth-child(1){
  37.             background:pink;
  38.             transform:perspective(900px) rotateY(45deg);
  39.         }
  40.         div:nth-child(2){
  41.             background:lightblue;
  42.             transform:perspective(900px) rotateY(45deg);
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotateY(45deg) translateZ(-200px);
  46.         }
  47.         main:hover div:nth-child(2){
  48.             transform:perspective(900px) rotateY(45deg) translateZ(200px);
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <main>
  54.         <div></div>
  55.         <div></div>
  56.     </main>
  57. </body>
  58. </html>

 

 

注意Z轴移动只能是具体的单位，不能是百分比

 

使用translate3d控制3D移动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             transform:translate(-50%,-50%);
  25.         }
  26.         div{
  27.             width:200px;
  28.             height:200px;
  29.             position:absolute;
  30.             top:50%;
  31.             left:50%;
  32.             margin-top:-100px;
  33.             margin-left:-100px;
  34.             transition:1s;
  35.         }
  36.         div:nth-child(1){
  37.             background:pink;
  38.             transform:perspective(900px) rotateY(45deg) translate3d(0,0,0);
  39.         }
  40.         div:nth-child(2){
  41.             background:lightblue;
  42.             transform:perspective(900px) rotateY(45deg) translate3d(0,0,0);
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotateY(45deg) translate3d(0,0,-200px);
  46.         }
  47.         main:hover div:nth-child(2){
  48.             transform:perspective(900px) rotateY(45deg) translate3d(0,0,200px);
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <main>
  54.         <div></div>
  55.         <div></div>
  56.     </main>
  57. </body>
  58. </html>

 

 

漂亮的动感表单效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             transform:translate(-50%,-50%);
  25.             display:flex;
  26.             flex-direction:column;
  27.             justify-content:center;
  28.             align-items:center;
  29.             
  30.         }
  31.         .field{
  32.             position:relative;
  33.             overflow:hidden;
  34.             margin-bottom:20px;
  35.         }
  36.         .field::before{
  37.             content:'';
  38.             position:absolute;
  39.             left:0;
  40.             bottom:0;
  41.             height:2px;
  42.             right:0;
  43.             background-image:linear-gradient(to right,white,lightblue,pink, lightgreen,white);
  44.             transform:translateX(-100%);
  45.             transition:2s;
  46.         }
  47.         .field:hover::before{
  48.             transform:translateX(100%);
  49.         }
  50.         .field input{
  51.             border:none;
  52.             outline:none;
  53.             padding:10px;
  54.             background:#f3f3f3;
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  59.     <main>
  60.         <div class="field"><input type="text" placeholder="请输入账号"></div>
  61.         <div class="field"><input type="text" placeholder="请输入密码"></div>
  62.     </main>
  63. </body>
  64. </html>

 

 

超酷的移动端视图切换：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.         }
  14.         body{
  15.             width:100vw;
  16.             height:100vh;
  17.             display:flex;
  18.             flex-direction:column;
  19.         }
  20.         main{
  21.             flex:1;
  22.         }
  23.         nav{
  24.             height:8vh;
  25.             background:lightblue;
  26.             display:flex;
  27.             justify-content:space-evenly;
  28.             align-items:center;
  29.         }
  30.         nav a{
  31.             text-decoration: none;
  32.             color:white;
  33.             text-transform:uppercase;
  34.             flex:1;
  35.             text-align:center;
  36.         }
  37.         nav a:nth-child(2){
  38.             border-left:1px solid white;
  39.             border-right:1px solid white;
  40.         }
  41.  
  42.     </style>
  43. </head>
  44. <body>
  45.     <main></main>
  46.     <nav>
  47.         <a href="">home</a>
  48.         <a href="">video</a>
  49.         <a href="">live</a>
  50.     </nav>
  51. </body>
  52. </html>

 

 

移动端多视图切换呈现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7.     <link rel="stylesheet" href="fa/css/font-awesome.css">
  8.  
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             flex-direction:column;
  20.             background:red;
  21.         }
  22.         body::after{
  23.             content:'cyy';
  24.             position:absolute;
  25.             top:50%;
  26.             left:50%;
  27.             transform:translate(-50%,-50%);
  28.             font-size:2em;
  29.             opacity:.3;
  30.         }
  31.         main{
  32.             flex:1;
  33.             position:relative;
  34.         }
  35.         nav{
  36.             height:8vh;
  37.             background:lightblue;
  38.             display:flex;
  39.             justify-content:space-evenly;
  40.             align-items:center;
  41.         }
  42.         nav a{
  43.             text-decoration: none;
  44.             color:white;
  45.             text-transform:uppercase;
  46.             flex:1;
  47.             text-align:center;
  48.         }
  49.         nav a:nth-child(2){
  50.             border-left:1px solid white;
  51.             border-right:1px solid white;
  52.         }
  53.         main>div{
  54.             width:100%;
  55.             height:100%;
  56.             position:absolute;
  57.             left:0;
  58.             top:0;
  60.             display:flex;
  61.             flex-direction:column;
  62.             justify-content:space-evenly;
  63.             align-items:center;
  65.             transform:translateY(-100%);
  66.             transition:1s;
  68.             z-index:1;
  69.         }
  70.         main>div:target{
  71.             transform:translateY(0);
  72.         }
  73.         /* :target被点击触发时 */
  74.         main>div:nth-child(1):target{
  75.             background:#ddd;
  76.         }
  77.         main>div:nth-child(2):target{
  78.             background:orange;
  79.         }
  80.         main>div:nth-child(3):target{
  81.             background:lightgreen;
  82.         }
  83.         i[class^='fa']{
  84.             font-size:6em;
  85.             color:white;
  86.         }
  87.     </style>
  88. </head>
  89. <body>
  90.     <main>
  91.         <div id="home"><i class="fa fa-home"></i></div>
  92.         <div id="video"><i class="fa fa-ban"></i></div>
  93.         <div id="live"><i class="fa fa-camera"></i></div>
  94.     </main>
  95.     <nav>
  96.         <a href="#home">home</a>
  97.         <a href="#video">video</a>
  98.         <a href="#live">live</a>
  99.     </nav>
  100. </body>
  101. </html>

 

2D缩放使用方法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             transform:translate(-50%,-50%);
  25.         }
  26.         div{
  27.             width:200px;
  28.             height:200px;
  29.             position:absolute;
  30.             top:50%;
  31.             left:50%;
  32.             margin-top:-100px;
  33.             margin-left:-100px;
  34.             transition:1s;
  35.         }
  36.         div:nth-child(1){
  37.             background:pink;
  38.         }
  39.         div:nth-child(2){
  40.             background:lightblue;
  41.         }
  42.         main:hover div:nth-child(1){
  43.         }
  44.         main:hover div:nth-child(2){
  45.                     transform:scaleX(2);
  46.                     transform:scaleY(.5);
  47.                     transform:scale(2,.5);
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <main>
  53.         <div></div>
  54.         <div></div>
  55.     </main>
  56. </body>
  57. </html>

 

 

3D视图中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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             width:100vw;
  16.             height:100vh;
  17.         }
  18.         main{
  19.             position:absolute;
  20.             width:400px;
  21.             height:400px;
  22.             border:1px solid pink;
  23.             left:50%;
  24.             top:50%;
  25.             transform:translate(-50%,-50%) perspective(900px) rotateY(45deg);
  26.             transform-style:preserve-3d;
  27.             transition:1s;
  28.         }
  29.         body:hover main{
  30.             /* 把Z轴变长 */
  31.             transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(3);
  32.              /* 把Z轴变短 */
  33.             transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(.5);
  34.         }
  35.         div{
  36.             width:200px;
  37.             height:200px;
  39.             position:absolute;
  40.             left:50%;
  41.             top:50%;
  42.             transform:translate(-50%,-50%);
  43.             transition:1s;
  44.  
  45.         }
  46.         div:nth-child(1){
  47.             background:lightblue;
  48.  
  49.         }
  50.         div:nth-child(2){
  51.             background:#ddd;
  52.  
  53.         }
  54.         main:hover div:nth-child(2){
  55.             transform:translateZ(-400px);
  56.  
  57.         }
  58.         
  59.     </style>
  60. </head>
  61. <body>
  62.     <main>
  63.         <div></div>
  64.         <div></div>
  65.     </main>
  66. </body>
  67. </html>

 

使用slace3d同时改变三轴缩放：

  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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         body{
  15.             width:100vw;
  16.             height:100vh;
  17.         }
  18.         main{
  19.             position:absolute;
  20.             width:400px;
  21.             height:400px;
  22.             border:1px solid pink;
  23.             left:50%;
  24.             top:50%;
  25.             transform:translate(-50%,-50%) perspective(900px) rotateY(45deg);
  26.             transform-style:preserve-3d;
  27.             transition:1s;
  28.         }
  29.         body:hover main{
  30.             transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scale3d(2,2,2);
  31.         }
  32.         div{
  33.             width:200px;
  34.             height:200px;
  36.             position:absolute;
  37.             left:50%;
  38.             top:50%;
  39.             transform:translate(-50%,-50%);
  40.             transition:1s;
  41.  
  42.         }
  43.         div:nth-child(1){
  44.             background:lightblue;
  45.  
  46.         }
  47.         div:nth-child(2){
  48.             background:#ddd;
  49.  
  50.         }
  51.         main:hover div:nth-child(2){
  52.             transform:translateZ(-400px);
  53.  
  54.         }
  55.         
  56.     </style>
  57. </head>
  58. <body>
  59.     <main>
  60.         <div></div>
  61.         <div></div>
  62.     </main>
  63. </body>
  64. </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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.         }
  19.         main{
  20.             position:absolute;
  21.             left:50%;
  22.             top:50%;
  23.             transform:translate(-50%,-50%);
  24.         }
  25.         ul{
  26.             display:flex;
  27.             list-style:none;
  28.         }
  29.         ul li{
  30.             margin-right:10px;
  31.  
  32.         }
  33.         ul li strong{
  34.             padding:5px 30px;
  35.             text-transform:uppercase;
  36.             background:lightgreen;
  37.             color:white;
  38.             cursor:pointer;
  39.         }
  40.         strong+div{
  41.             background:#ddd;
  42.             padding:10px;
  43.             display:flex;
  44.             flex-direction:column;
  45.             transform:scale(0);
  46.             transition:.5s;
  47.             position:relative;
  48.             z-index:-1;
  49.             transform-origin:center top;
  50.         }
  51.         strong+div>a{
  52.             color:#333;
  53.             padding:5px 0;
  54.             text-decoration:none;
  55.         }
  56.         ul li:hover strong+div{
  57.             transform:scale(1);
  58.         }
  59.         
  60.     </style>
  61. </head>
  62. <body>
  63.     <main>
  64.         <ul>
  65.             <li>
  66.                 <strong>video</strong>
  67.                 <div>
  68.                     <a href="">html</a>
  69.                     <a href="">css</a>
  70.                 </div>
  71.                 
  72.             </li>
  73.             <li>
  74.                 <strong>live</strong>
  75.                 <div>
  76.                     <a href="">js</a>
  77.                     <a href="">jq</a>
  78.                 </div>
  79.                 
  80.             </li>
  81.         </ul>
  82.     </main>
  83. </body>
  84. </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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content:center;
  20.             align-items:center;
  21.             background:#ddd;
  22.         }
  23.         main{
  24.             display:flex;
  25.             justify-content:center;
  26.             align-items:center;
  27.         }
  28.         div{
  29.             width:200px;
  30.             height:200px;
  31.             margin-right:20px;
  32.             overflow:hidden;
  33.             border:1px solid #eee;
  34.             transition:1s;
  35.         }
  36.         div>img{
  37.             height:100%;
  38.             cursor:pointer;
  39.         }
  40.         main:hover div{
  41.             /* 滤镜：高斯模糊 */
  42.             filter:blur(5px);
  43.             transform:scale(.6);
  44.         }
  45.         main:hover div:hover{
  46.             filter:none;
  47.             transform:scale(1.6);
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <main>
  53.         <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>
  54.         <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>
  55.         <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>
  56.     </main>
  57. </body>
  58. </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.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:flex;
  19.             justify-content:center;
  20.             align-items:center;
  21.             background:#ddd;
  22.         }
  23.         main{
  24.             display:flex;
  25.             justify-content:center;
  26.             align-items:center;
  27.         }
  28.         div{
  29.             width:200px;
  30.             height:200px;
  31.             margin-right:20px;
  32.             overflow:hidden;
  33.             border:1px solid #eee;
  34.             
  35.         }
  36.         div>img{
  37.             height:100%;
  38.             cursor:pointer;
  39.             transition:1s;
  40.             filter:blur(2px);
  41.         }
  42.         img:hover{
  43.             transform:scale(1.6);
  44.             filter:none;
  45.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <main>
  50.         <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>
  51.         <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>
  52.         <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>
  53.     </main>
  54. </body>
  55. </html>

 

 

按X轴旋转物体与透视查看：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             margin-left:-200px;
  25.             margin-top:-200px;
  26.             transform:perspective(900px) rotateX(-45deg);
  27.             /* 3d透视，能看到z轴的内容 */
  28.             transform-style:preserve-3d;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.             transition:1s;
  39.             
  40.         }
  41.         div:nth-child(1){
  42.             background:pink;
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotateX(90deg);
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <div></div>
  52.     </main>
  53. </body>
  54. </html>

 

 

YZ轴旋转操作体验：

【y轴】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             margin-left:-200px;
  25.             margin-top:-200px;
  26.             transform:perspective(900px) rotateY(-45deg);
  27.             /* 3d透视，能看到z轴的内容 */
  28.             transform-style:preserve-3d;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.             transition:1s;
  39.             
  40.         }
  41.         div:nth-child(1){
  42.             background:pink;
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotateY(90deg);
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <div></div>
  52.     </main>
  53. </body>
  54. </html>

 

 

【z轴】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             margin-left:-200px;
  25.             margin-top:-200px;
  26.             transform:perspective(900px) rotateY(-45deg);
  27.             /* 3d透视，能看到z轴的内容 */
  28.             transform-style:preserve-3d;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.             transition:1s;
  39.             
  40.         }
  41.         div:nth-child(1){
  42.             background:pink;
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotateZ(90deg);
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <div></div>
  52.     </main>
  53. </body>
  54. </html>

 

 

平面2d旋转：rotate

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             margin-left:-200px;
  25.             margin-top:-200px;
  26.             transform:perspective(900px) rotateY(-45deg);
  27.             /* 3d透视，能看到z轴的内容 */
  28.             transform-style:preserve-3d;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.             transition:1s;
  39.             
  40.         }
  41.         div:nth-child(1){
  42.             background:pink;
  43.         }
  44.         main:hover div:nth-child(1){
  45.             transform:perspective(900px) rotate(390deg);
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <main>
  51.         <div></div>
  52.     </main>
  53. </body>
  54. </html>

 

rotate3d控制3d向量旋转：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.  
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         body{
  14.             width:100vw;
  15.             height:100vh;
  16.         }
  17.       main{
  18.             width:400px;
  19.             height:400px;
  20.             border:1px solid silver;
  21.             position:absolute;
  22.             top:50%;
  23.             left:50%;
  24.             margin-left:-200px;
  25.             margin-top:-200px;
  26.             transform:perspective(900px) rotateY(-45deg);
  27.             /* 3d透视，能看到z轴的内容 */
  28.             transform-style:preserve-3d;
  29.         }
  30.         div{
  31.             width:200px;
  32.             height:200px;
  33.             position:absolute;
  34.             top:50%;
  35.             left:50%;
  36.             margin-top:-100px;
  37.             margin-left:-100px;
  38.             transition:1s;
  39.             
  40.         }
  41.         div:nth-child(1){
  42.             background:pink;
  43.         }
  44.         main:hover div:nth-child(1){
  45.             /* x轴旋转 */
  46.             transform:perspective(900px) rotate3d(1,0,0,90deg);
  47.             /* y轴旋转 */
  48.             transform:perspective(900px) rotate3d(0,1,0,90deg);
  49.             /* z轴旋转 */
  50.             transform:perspective(900px) rotate3d(0,0,1,90deg);
  51.             /* 对角线旋转 */
  52.             transform:perspective(900px) rotate3d(1,1,0,90deg);
  53.             transform:perspective(900px) rotate3d(1,0,1,90deg);
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <main>
  59.         <div></div>
  60.     </main>
  61. </body>
  62. </html>

 

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

参数不会叠加，后面的会覆盖掉前面的 ；

顺序不同，变形结果也不同；

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13954565.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号