旋转照片墙

首先，来看下，是什么效果吧，上效果图 ↓

其实这个东西，很容易制作，先说下思路， 把照片都给叠在一起，然后 rotateY 旋转，给每张图片 旋转不一样的角度能构成一圈， 然后translateZ 出去就好了，最后一步，父级转起来。

搭建好基本的 html 和 css ↓ 已经写好注释啦。

  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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         :root,body{    /* root在html也就是文档，文档是有高度的，而body 是没有高度的，所以继承下来，给 body的子元素使用*/
  14.             height: 100%;
  15.         }
  16.         .wra{
  17.             position: absolute;    /* 把父级作为容器，定位到屏幕的中间去 */
  18.             width: 200px;
  19.             height: 100px;
  20.             left: calc(50% - 100px);
  21.             top: calc(50% - 50px);
  22.         }
  23.         .img{
  24.             position: absolute;   /*设置定位属性，然后所与的图片就会 叠在一起。*/
  25.             width: 200px;
  26.             height: 100px;
  27.         }
  28.         .img:nth-of-type(1){
  29.             background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
  30.             background-size: cover; /*这个参数，是为了更好的显示完整的图片，既是他有可能显示不全。*/
  31.         }
  32.         .img:nth-of-type(2){
  33.             background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
  34.             background-size: cover;
  35.         }
  36.         .img:nth-of-type(3){
  37.             background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
  38.             background-size: cover;
  39.         }
  40.         .img:nth-of-type(4){
  41.             background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
  42.             background-size: cover;
  43.         }
  44.         .img:nth-of-type(5){
  45.             background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
  46.             background-size: cover;
  47.         }
  48.         .img:nth-of-type(6){
  49.             background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
  50.             background-size: cover;
  51.         }
  52.         .img:nth-of-type(7){
  53.             background-image: url('./img/rotatePic/下载 (1).jfif');
  54.             background-size: cover;
  55.         }
  56.         .img:nth-of-type(8){
  57.             background-image: url('./img/rotatePic/下载 (2).jfif');
  58.             background-size: cover;
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="wra">
  64.         <div class="img"></div>
  65.         <div class="img"></div>
  66.         <div class="img"></div>
  67.         <div class="img"></div>
  68.         <div class="img"></div>
  69.         <div class="img"></div>
  70.         <div class="img"></div>
  71.         <div class="img"></div>
  72.     </div>
  73. </body>
  74. </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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         :root,body{
  14.             height: 100%;
  15.         }
  16.         .wra{
  17.             position: absolute;
  18.             width: 200px;
  19.             height: 100px;
  20.             left: calc(50% - 100px);
  21.             top: calc(50% - 50px);
  22.         }
  23.         .img{
  24.             position: absolute;
  25.             width: 200px;
  26.             height: 100px;
  27.         }
  28.         .img:nth-of-type(1){
  29.             background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
  30.             background-size: cover;
  31.             /*第一张图片，就不用旋转了，让他在原位置就好。*/
  32.         }
  33.         .img:nth-of-type(2){
  34.             background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
  35.             background-size: cover;
  36.             transform: rotateY(45deg);
  37.         }
  38.         .img:nth-of-type(3){
  39.             background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
  40.             background-size: cover;
  41.             transform: rotateY(90deg);
  42.         }
  43.         .img:nth-of-type(4){
  44.             background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
  45.             background-size: cover;
  46.             transform: rotateY(135deg);
  47.         }
  48.         .img:nth-of-type(5){
  49.             background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
  50.             background-size: cover;
  51.             transform: rotateY(180deg);
  52.         }
  53.         .img:nth-of-type(6){
  54.             background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
  55.             background-size: cover;
  56.             transform: rotateY(225deg);
  57.         }
  58.         .img:nth-of-type(7){
  59.             background-image: url('./img/rotatePic/下载 (1).jfif');
  60.             background-size: cover;
  61.             transform: rotateY(270deg);
  62.         }
  63.         .img:nth-of-type(8){
  64.             background-image: url('./img/rotatePic/下载 (2).jfif');
  65.             background-size: cover;
  66.             transform: rotateY(315deg);
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.     <div class="wra">
  72.         <div class="img"></div>
  73.         <div class="img"></div>
  74.         <div class="img"></div>
  75.         <div class="img"></div>
  76.         <div class="img"></div>
  77.         <div class="img"></div>
  78.         <div class="img"></div>
  79.         <div class="img"></div>
  80.     </div>
  81. </body>
  82. </html>

旋转好位置后，添加 translateZ() 参数，分开图片。因为，translateZ 也是 transform 的参数之一，所以要添加在rotate后面接上。最后，记得在15行添加上 perspective 属性。不懂什么是 perspective 属性的话，请点击→ css3系列之详解perspective

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  7     <title>Document</title>
  8.  8     <style>
  9.  9         *{
  10. 10             padding: 0;
  11. 11             margin: 0;
  12. 12         }
  13. 13         :root,body{
  14. 14             height: 100%;
  15. 15             perspective: 1000px;
  16. 16         }
  17. 17         .wra{
  18. 18             position: absolute;
  19. 19             width: 200px;
  20. 20             height: 100px;
  21. 21             left: calc(50% - 100px);
  22. 22             top: calc(50% - 50px);
  23. 23             transform-style: preserve-3d; /*这个属性的作用呢，是为了让浏览器，以3d的方式来渲染，
  24. 24                                             这个属性要添在父级身上，那么他的子元素，就能以3d的方式展示。
  25. 25                                             浏览器默认的渲染方式是2d的，我们这种3d结构，他显示不出来。 */
  26. 26         }
  27. 27         .img{
  28. 28             position: absolute;
  29. 29             width: 200px;
  30. 30             height: 100px;
  31. 31         }
  32. 32         .img:nth-of-type(1){
  33. 33             background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
  34. 34             background-size: cover;
  35. 35             transform: translateZ(350px);
  36. 36         }
  37. 37         .img:nth-of-type(2){
  38. 38             background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
  39. 39             background-size: cover;
  40. 40             transform: rotateY(45deg) translateZ(350px);
  41. 41         }
  42. 42         .img:nth-of-type(3){
  43. 43             background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
  44. 44             background-size: cover;
  45. 45             transform: rotateY(90deg) translateZ(350px);
  46. 46         }
  47. 47         .img:nth-of-type(4){
  48. 48             background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
  49. 49             background-size: cover;
  50. 50             transform: rotateY(135deg) translateZ(350px);
  51. 51         }
  52. 52         .img:nth-of-type(5){
  53. 53             background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
  54. 54             background-size: cover;
  55. 55             transform: rotateY(180deg) translateZ(350px);
  56. 56         }
  57. 57         .img:nth-of-type(6){
  58. 58             background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
  59. 59             background-size: cover;
  60. 60             transform: rotateY(225deg) translateZ(350px);
  61. 61         }
  62. 62         .img:nth-of-type(7){
  63. 63             background-image: url('./img/rotatePic/下载 (1).jfif');
  64. 64             background-size: cover;
  65. 65             transform: rotateY(270deg) translateZ(350px);
  66. 66         }
  67. 67         .img:nth-of-type(8){
  68. 68             background-image: url('./img/rotatePic/下载 (2).jfif');
  69. 69             background-size: cover;
  70. 70             transform: rotateY(315deg) translateZ(350px);
  71. 71         }
  72. 72     </style>
  73. 73 </head>
  74. 74 <body>
  75. 75     <div class="wra">
  76. 76         <div class="img"></div>
  77. 77         <div class="img"></div>
  78. 78         <div class="img"></div>
  79. 79         <div class="img"></div>
  80. 80         <div class="img"></div>
  81. 81         <div class="img"></div>
  82. 82         <div class="img"></div>
  83. 83         <div class="img"></div>
  84. 84     </div>
  85. 85 </body>
  86. 86 </html>

然后你就能看见这种效果啦。

然后，我们给父级 加上旋转的功能就OK了。

  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 http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.         :root,body{
  14.             height: 100%;
  15.             perspective: 1000px;
  16.         }
  17.         @keyframes run{   /*这里我们要他旋转360度，那么就不用那么麻烦写关键帧了。开始0  结束360，然后循环即可*/
  18.             0%{
  19.                 transform: rotateY(0deg);
  20.             }
  21.             100%{
  22.                 transform: rotateY(360deg);
  23.             }
  24.         }
  25.         .wra{
  26.             position: absolute;
  27.             width: 200px;
  28.             height: 100px;
  29.             left: calc(50% - 100px);
  30.             top: calc(50% - 50px);
  31.             transform-style: preserve-3d;
  32.             animation: run 20s linear infinite; /*animation linear是匀速运动，infinite是无限循环*/
  33.         }
  34.         .img{
  35.             position: absolute;
  36.             width: 200px;
  37.             height: 100px;
  38.         }
  39.         .img:nth-of-type(1){
  40.             background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
  41.             background-size: cover;
  42.             transform: translateZ(350px);
  43.         }
  44.         .img:nth-of-type(2){
  45.             background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
  46.             background-size: cover;
  47.             transform: rotateY(45deg) translateZ(350px);
  48.         }
  49.         .img:nth-of-type(3){
  50.             background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
  51.             background-size: cover;
  52.             transform: rotateY(90deg) translateZ(350px);
  53.         }
  54.         .img:nth-of-type(4){
  55.             background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
  56.             background-size: cover;
  57.             transform: rotateY(135deg) translateZ(350px);
  58.         }
  59.         .img:nth-of-type(5){
  60.             background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
  61.             background-size: cover;
  62.             transform: rotateY(180deg) translateZ(350px);
  63.         }
  64.         .img:nth-of-type(6){
  65.             background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
  66.             background-size: cover;
  67.             transform: rotateY(225deg) translateZ(350px);
  68.         }
  69.         .img:nth-of-type(7){
  70.             background-image: url('./img/rotatePic/下载 (1).jfif');
  71.             background-size: cover;
  72.             transform: rotateY(270deg) translateZ(350px);
  73.         }
  74.         .img:nth-of-type(8){
  75.             background-image: url('./img/rotatePic/下载 (2).jfif');
  76.             background-size: cover;
  77.             transform: rotateY(315deg) translateZ(350px);
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82.     <div class="wra">
  83.         <div class="img"></div>
  84.         <div class="img"></div>
  85.         <div class="img"></div>
  86.         <div class="img"></div>
  87.         <div class="img"></div>
  88.         <div class="img"></div>
  89.         <div class="img"></div>
  90.         <div class="img"></div>
  91.     </div>
  92. </body>
  93. </html>

最后，再加上一个小功能。像你想看哪里，鼠标就移动到 那里 即可，代码在93行开始。

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  7     <title>Document</title>
  8.  8     <style>
  9.  9         *{
  10. 10             padding: 0;
  11. 11             margin: 0;
  12. 12         }
  13. 13         :root,body{
  14. 14             height: 100%;
  15. 15             perspective: 1000px;
  16. 16         }
  17. 17         @keyframes run{
  18. 18             0%{
  19. 19                 transform: rotateY(0deg);
  20. 20             }
  21. 21             100%{
  22. 22                 transform: rotateY(360deg);
  23. 23             }
  24. 24         }
  25. 25         .wra{
  26. 26             position: absolute;
  27. 27             width: 200px;
  28. 28             height: 100px;
  29. 29             left: calc(50% - 100px);
  30. 30             top: calc(50% - 50px);
  31. 31             transform-style: preserve-3d;
  32. 32             animation: run 20s linear infinite;
  33. 33         }
  34. 34         .img{
  35. 35             position: absolute;
  36. 36             width: 200px;
  37. 37             height: 100px;
  38. 38         }
  39. 39         .img:nth-of-type(1){
  40. 40             background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
  41. 41             background-size: cover;
  42. 42             transform: translateZ(350px);
  43. 43         }
  44. 44         .img:nth-of-type(2){
  45. 45             background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
  46. 46             background-size: cover;
  47. 47             transform: rotateY(45deg) translateZ(350px);
  48. 48         }
  49. 49         .img:nth-of-type(3){
  50. 50             background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
  51. 51             background-size: cover;
  52. 52             transform: rotateY(90deg) translateZ(350px);
  53. 53         }
  54. 54         .img:nth-of-type(4){
  55. 55             background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
  56. 56             background-size: cover;
  57. 57             transform: rotateY(135deg) translateZ(350px);
  58. 58         }
  59. 59         .img:nth-of-type(5){
  60. 60             background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
  61. 61             background-size: cover;
  62. 62             transform: rotateY(180deg) translateZ(350px);
  63. 63         }
  64. 64         .img:nth-of-type(6){
  65. 65             background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
  66. 66             background-size: cover;
  67. 67             transform: rotateY(225deg) translateZ(350px);
  68. 68         }
  69. 69         .img:nth-of-type(7){
  70. 70             background-image: url('./img/rotatePic/下载 (1).jfif');
  71. 71             background-size: cover;
  72. 72             transform: rotateY(270deg) translateZ(350px);
  73. 73         }
  74. 74         .img:nth-of-type(8){
  75. 75             background-image: url('./img/rotatePic/下载 (2).jfif');
  76. 76             background-size: cover;
  77. 77             transform: rotateY(315deg) translateZ(350px);
  78. 78         }
  79. 79     </style>
  80. 80 </head>
  81. 81 <body>
  82. 82     <div class="wra">
  83. 83         <div class="img"></div>
  84. 84         <div class="img"></div>
  85. 85         <div class="img"></div>
  86. 86         <div class="img"></div>
  87. 87         <div class="img"></div>
  88. 88         <div class="img"></div>
  89. 89         <div class="img"></div>
  90. 90         <div class="img"></div>
  91. 91     </div>
  92. 92     <script>
  93. 93         document.body.onmousemove = function(e){
  94. 94             this.style.perspectiveOrigin = e.pageX + 'px ' + e.pageY +'px';
  95. 95         }
  96. 96     </script>
  97. 97 </body>
  98. 98 </html>

看一下效果好吧。

利用perspective 和 transform 里面的几个参数来实现旋转照片墙的更多相关文章

  1. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

  2. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. perspective结合transform的3D效果

    http://css-tricks.com/almanac/properties/p/perspective/ 链接中讲了 perspective的两种用法及比较: 1.perspective:100 ...

  4. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  5. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  6. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  7. 教你如何利用分布式的思想处理集群的参数配置信息——spring的configurer妙用

    引言 最近LZ的技术博文数量直线下降,实在是非常抱歉,之前LZ曾信誓旦旦的说一定要把<深入理解计算机系统>写完,现在看来,LZ似乎是在打自己脸了.尽管LZ内心一直没放弃,但从现状来看,需要 ...

  8. 【C++】利用指针实现通过函数改变多个参数的值

    写惯了python,对于C++的语法越来越生疏,不同于python中函数可以return多个变量,C++的函数要想返回多个参数可以利用指针实现. 因为在函数内部的变量都是局部变量,所以当参数传入函数中 ...

  9. C++利用不完全实例化来获得函数模板参数的返回值和参数

    有一些模板会以函数为模板参数,有时候这些模板要获得函数的返回值和参数.如在boost中的signal和slot机制,就存在这样情况. 那么,我们如何得到这些信息呢? 我们使用C++不完全实例化来实现. ...

随机推荐

  1. Django( 学习第四部 Django的views视)

    目录 视图层 JsonResponse对象 form表单之文件上传 request方法及属性 FBV与CBV JsonResponse对象 前端序列化 JSON.stringify() json.du ...

  2. DiskLruCache和Lrucache缓存bitmap

    三级缓存,先在内存Lrucache中查找缓存,没有就去外存DiskLrucache中查找,再没有就下载,Lru不会自动删除,所以要设置最大缓存内存,后台运行Lrucache不会消失,关闭程序Diskl ...

  3. day05 selenium基本使用

    本文通过举例介绍selenium的基本使用方法,用来爬取京东笔记本电脑的商品信息,包括名称,url,价格,评价信息. from selenium import webdriver # 导入键盘Keys ...

  4. Spring学习-Bean的基本概念知识

    4月份开始复习一遍spring相关知识.让自己巩固一下spring大法的深奥益处,所以就看了大佬的博客,转载留下来日后继续研读.认为重点的标记为红色 转载自:http://www.cnblogs.co ...

  5. Visual Studio 2017 创建Winfrom工程

    1.打开Visual Studio 2017,出现界面点击-创建新项目 2.选择-Window桌面,选择windows 窗体应用(.NET Framework) 3.完成窗体程序创建,可在左边工具栏里 ...

  6. Java学习的第三十一天

    1.使用RandomAccessFile随机读写文件 2.没有问题 3.明天学习综合实例

  7. 《Google软件测试之道》 第一章google软件测试介绍

    前段时间比较迷茫,没有明确的学习方向和内容.不过有一点应该是可以肯定的:迷茫的时候就把空闲的时间用来看书吧! 这本书,目前只是比较粗略的看了一遍,感触很大.以下是个人所作的笔记,与原文会有出入的地方. ...

  8. java的高并发IO原理，阻塞BIO同步非阻塞NIO,异步非阻塞AIO

    原文地址: IO读写的基础原理 大家知道,用户程序进行IO的读写,依赖于底层的IO读写,基本上会用到底层的read&write两大系统调用.在不同的操作系统中,IO读写的系统调用的名称可能不完 ...

  9. 9.集合set和frozenset冻结集合函数

    集合set set和dict类似,也是一组key的集合,但不存储value.由于key不能重复,所以在set中没有重复的key. 集合中的元素要求是不可变的并且还是唯一的,我们就利用它是唯一来做去重. ...

  10. HTML图片点击放大---关闭

    <html lang="en"> <head> <meta charset="UTF-8"> </head> & ...