3D旋转相册

抖音上要到的效果

2019年11月19日 做了教程更新,没弄出来的直接看下面的更新

文件目录

按照这个目录创建就可以,照片放到 img 文件夹里,照片名字按下面方式命名,照片后缀是 .jpg

照片命名

HTML


 
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>css-3d旋转 </title>
  6. <link rel="stylesheet" href="css/index.css" />
  7. </head>
  8. <body>
  9. <!--/*外层最大容器*/-->
  10. <div class="wrap">
  11. <!-- /*包裹所有元素的容器*/-->
  12. <div class="cube">
  13. <!--前面图片 -->
  14. <div class="out_front">
  15. <img src="img/1.jpg" class="pic"/>
  16. </div>
  17. <!--后面图片 -->
  18. <div class="out_back">
  19. <img src="img/2.jpg" class="pic"/>
  20. </div>
  21. <!--左图片 -->
  22. <div class="out_left">
  23. <img src="img/3.jpg" class="pic"/>
  24. </div>
  25. <div class="out_right">
  26. <img src="img/4.jpg" class="pic"/>
  27. </div>
  28. <div class="out_top">
  29. <img src="img/5.jpg" class="pic"/>
  30. </div>
  31. <div class="out_bottom">
  32. <img src="img/6.jpg" class="pic"/>
  33. </div>
  34. <!--小正方体 -->
  35. <span class="in_front">
  36. <img src="img/7.jpg" class="in_pic" />
  37. </span>
  38. <span class="in_back">
  39. <img src="img/8.jpg" class="in_pic" />
  40. </span>
  41. <span class="in_left">
  42. <img src="img/9.jpg" class="in_pic" />
  43. </span>
  44. <span class="in_right">
  45. <img src="img/10.jpg" class="in_pic" />
  46. </span>
  47. <span class="in_top">
  48. <img src="img/11.jpg" class="in_pic" />
  49. </span>
  50. <span class="in_bottom">
  51. <img src="img/12.jpg" class="in_pic" />
  52. </span>
  53. </div>
  54. </div>
  55. </body>
  56. </html>

 

CSS


 
 
  1. html{
  2. background: #000;
  3. height: 100%;
  4. }
  5. /*最外层容器样式*/
  6. .wrap{
  7. position: relative;
  8. position: absolute;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. width: 200px;
  14. height: 200px;
  15. margin: auto;
  16. /*改变左右上下,图片方块移动*/
  17. }
  18. /*包裹所有容器样式*/
  19. .cube{
  20. width: 200px;
  21. height: 200px;
  22. margin: 0 auto;
  23. transform-style: preserve- 3d;
  24. transform: rotateX(-30deg) rotateY(-80deg);
  25. -webkit-animation: rotate 20s infinite;
  26. /*匀速*/
  27. animation-timing-function: linear;
  28. }
  29. @- webkit- keyframes rotate{
  30. from{ transform: rotateX(0deg) rotateY(0deg);}
  31. to{ transform: rotateX(360deg) rotateY(360deg);}
  32. }
  33. .cube div{
  34. position: absolute;
  35. width: 200px;
  36. height: 200px;
  37. opacity: 0.8;
  38. transition: all . 4s;
  39. }
  40. /*定义所有图片样式*/
  41. .pic{
  42. width: 200px;
  43. height: 200px;
  44. }
  45. .cube .out_front{
  46. transform: rotateY(0deg) translateZ(100px);
  47. }
  48. .cube .out_back{
  49. transform: translateZ(-100px) rotateY(180deg);
  50. }
  51. .cube .out_left{
  52. transform: rotateY(90deg) translateZ(100px);
  53. }
  54. .cube .out_right{
  55. transform: rotateY(-90deg) translateZ(100px);
  56. }
  57. .cube .out_top{
  58. transform: rotateX(90deg) translateZ(100px);
  59. }
  60. .cube .out_bottom{
  61. transform: rotateX(-90deg) translateZ(100px);
  62. }
  63. /*定义小正方体样式*/
  64. .cube span{
  65. display: bloack;
  66. width: 100px;
  67. height: 100px;
  68. position: absolute;
  69. top: 50px;
  70. left: 50px;
  71. }
  72. .cube .in_pic{
  73. width: 100px;
  74. height: 100px;
  75. }
  76. .cube .in_front{
  77. transform: rotateY(0deg) translateZ(50px);
  78. }
  79. .cube .in_back{
  80. transform: translateZ(-50px) rotateY(180deg);
  81. }
  82. .cube .in_left{
  83. transform: rotateY(90deg) translateZ(50px);
  84. }
  85. .cube .in_right{
  86. transform: rotateY(-90deg) translateZ(50px);
  87. }
  88. .cube .in_top{
  89. transform: rotateX(90deg) translateZ(50px);
  90. }
  91. .cube .in_bottom{
  92. transform: rotateX(-90deg) translateZ(50px);
  93. }
  94. /*鼠标移入后样式*/
  95. .cube :hover .out_front{
  96. transform: rotateY(0deg) translateZ(200px);
  97. }
  98. .cube :hover .out_back{
  99. transform: translateZ(-200px) rotateY(180deg);
  100. }
  101. .cube :hover .out_left{
  102. transform: rotateY(90deg) translateZ(200px);
  103. }
  104. .cube :hover .out_right{
  105. transform: rotateY(-90deg) translateZ(200px);
  106. }
  107. .cube :hover .out_top{
  108. transform: rotateX(90deg) translateZ(200px);
  109. }
  110. .cube :hover .out_bottom{
  111. transform: rotateX(-90deg) translateZ(200px);
  112. }

 


                                                                                                                                                                    以下2019年7月2日修改

 

新建文件夹, 然后所有步骤在里面进行操作。

 

然后创建css和img文件夹

 

 

最后说下图片大小,图片像素580*549 左右就行(长*宽)

 

 


2019年11月19日 更新

 

本来想上传到csdn上让大家免费下载后来发现,下载积分是csdn自己定的修改不了,那就这样吧重新一步一步的把步骤发一下。

第一步:新建txt文件

第二步:把以下代码复制到txt文件中,并保存


 
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>css-3d旋转 </title>
  6. <link rel="stylesheet" href="css/index.css" />
  7. </head>
  8. <body>
  9. <!--/*外层最大容器*/-->
  10. <div class="wrap">
  11. <!-- /*包裹所有元素的容器*/-->
  12. <div class="cube">
  13. <!--前面图片 -->
  14. <div class="out_front">
  15. <img src="img/1.jpg" class="pic"/>
  16. </div>
  17. <!--后面图片 -->
  18. <div class="out_back">
  19. <img src="img/2.jpg" class="pic"/>
  20. </div>
  21. <!--左图片 -->
  22. <div class="out_left">
  23. <img src="img/3.jpg" class="pic"/>
  24. </div>
  25. <div class="out_right">
  26. <img src="img/4.jpg" class="pic"/>
  27. </div>
  28. <div class="out_top">
  29. <img src="img/5.jpg" class="pic"/>
  30. </div>
  31. <div class="out_bottom">
  32. <img src="img/6.jpg" class="pic"/>
  33. </div>
  34. <!--小正方体 -->
  35. <span class="in_front">
  36. <img src="img/7.jpg" class="in_pic" />
  37. </span>
  38. <span class="in_back">
  39. <img src="img/8.jpg" class="in_pic" />
  40. </span>
  41. <span class="in_left">
  42. <img src="img/9.jpg" class="in_pic" />
  43. </span>
  44. <span class="in_right">
  45. <img src="img/10.jpg" class="in_pic" />
  46. </span>
  47. <span class="in_top">
  48. <img src="img/11.jpg" class="in_pic" />
  49. </span>
  50. <span class="in_bottom">
  51. <img src="img/12.jpg" class="in_pic" />
  52. </span>
  53. </div>
  54. </div>
  55. </body>
  56. </html>

 

 

第三步:将文件改名为 index.html

第四步:新建文件夹,并改名为 css

第五步:进入css文件夹,并再次新建txt文件

第六步:将以下代码考入该文件,并保存,然后改名


 
 
  1. html{
  2. background: #000;
  3. height: 100%;
  4. }
  5. /*最外层容器样式*/
  6. .wrap{
  7. position: relative;
  8. position: absolute;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. width: 200px;
  14. height: 200px;
  15. margin: auto;
  16. /*改变左右上下,图片方块移动*/
  17. }
  18. /*包裹所有容器样式*/
  19. .cube{
  20. width: 200px;
  21. height: 200px;
  22. margin: 0 auto;
  23. transform-style: preserve- 3d;
  24. transform: rotateX(-30deg) rotateY(-80deg);
  25. -webkit-animation: rotate 20s infinite;
  26. /*匀速*/
  27. animation-timing-function: linear;
  28. }
  29. @- webkit- keyframes rotate{
  30. from{ transform: rotateX(0deg) rotateY(0deg);}
  31. to{ transform: rotateX(360deg) rotateY(360deg);}
  32. }
  33. .cube div{
  34. position: absolute;
  35. width: 200px;
  36. height: 200px;
  37. opacity: 0.8;
  38. transition: all . 4s;
  39. }
  40. /*定义所有图片样式*/
  41. .pic{
  42. width: 200px;
  43. height: 200px;
  44. }
  45. .cube .out_front{
  46. transform: rotateY(0deg) translateZ(100px);
  47. }
  48. .cube .out_back{
  49. transform: translateZ(-100px) rotateY(180deg);
  50. }
  51. .cube .out_left{
  52. transform: rotateY(90deg) translateZ(100px);
  53. }
  54. .cube .out_right{
  55. transform: rotateY(-90deg) translateZ(100px);
  56. }
  57. .cube .out_top{
  58. transform: rotateX(90deg) translateZ(100px);
  59. }
  60. .cube .out_bottom{
  61. transform: rotateX(-90deg) translateZ(100px);
  62. }
  63. /*定义小正方体样式*/
  64. .cube span{
  65. display: bloack;
  66. width: 100px;
  67. height: 100px;
  68. position: absolute;
  69. top: 50px;
  70. left: 50px;
  71. }
  72. .cube .in_pic{
  73. width: 100px;
  74. height: 100px;
  75. }
  76. .cube .in_front{
  77. transform: rotateY(0deg) translateZ(50px);
  78. }
  79. .cube .in_back{
  80. transform: translateZ(-50px) rotateY(180deg);
  81. }
  82. .cube .in_left{
  83. transform: rotateY(90deg) translateZ(50px);
  84. }
  85. .cube .in_right{
  86. transform: rotateY(-90deg) translateZ(50px);
  87. }
  88. .cube .in_top{
  89. transform: rotateX(90deg) translateZ(50px);
  90. }
  91. .cube .in_bottom{
  92. transform: rotateX(-90deg) translateZ(50px);
  93. }
  94. /*鼠标移入后样式*/
  95. .cube :hover .out_front{
  96. transform: rotateY(0deg) translateZ(200px);
  97. }
  98. .cube :hover .out_back{
  99. transform: translateZ(-200px) rotateY(180deg);
  100. }
  101. .cube :hover .out_left{
  102. transform: rotateY(90deg) translateZ(200px);
  103. }
  104. .cube :hover .out_right{
  105. transform: rotateY(-90deg) translateZ(200px);
  106. }
  107. .cube :hover .out_top{
  108. transform: rotateX(90deg) translateZ(200px);
  109. }
  110. .cube :hover .out_bottom{
  111. transform: rotateX(-90deg) translateZ(200px);
  112. }

 

复制完成后如图:

 

重命名为: index.css

第七步:新建文件夹,改名为 img

第八步:将图片考入 img 文件夹中,命名就按下图的方式命名,照片名一定要是1.jpg 2.jpg 3.jpg 4.jpg 到 12.jpg ,不能起别的名字。

1.jgp  2.jgp 3.jpg 4.jpg 等等往下类推,最多到  12.jpg   也就是最多放12张照片。

关于图片大小,图片像素580*549 左右就行(长*宽)。

最后的最后:关于修图片,我想这个不用我说了吧,作为广大舔狗中的一员怎么能不会修女神的照片呢,PS,美图秀秀,甚至画图都可以修改图片大小。

为了以防万一真有不会修改图片大小的! 以下用画图修改大小,看好了!!!!

首先以防万一有些人手残改错!!! 先把要修改的图片复制出来备份一份,省的改坏了,连个原来正常的图片都没有,到时候被你女神呵呵了可别来找我!!

复制好以后,你就可以拿这个照片随便改着玩了(你给他画个乌龟都可以  ||  >_>  ||),反正还有复制出来备份好的那一张。

选择你要修改的图片---右键,用画图打开-----点击重新调整大小----像素----勾去“保持纵横比”的勾,然后就可以修改像素大小了------修改完毕 点 确定--------保存-------搞定!

最后的最后:因为代码也不是我自己写的,我也没仔细研究,就当个玩的收藏了,感觉不错,分享记录下,也没想到会有这么多伙伴想要这些代码。关于要修改效果整体大小的,我只能告诉你们需要改很多地方,下图红框处基本都是要修改的地方并且还有好多地方我没有截图,因为这是个整体的效果你修改里层或者外层的同同时还要修改图片之间的边距,以及转的角度。。。如果一定要改的话,自己去研究下代码,看不懂的可以百度下什么意思,自己修改下试试看。

如果你不是搞IT的人的话,那我劝你还是放弃吧,别把时间浪费在这,有这功夫多给你女神跑跑腿也比这来得实在,又或者你就是有毅力就要修改代码的话,你可以努力去搞懂这些代码,然后修改它。如果你改成功了的话,那么恭喜你,又掌握了一项牛批的新技能,这样你就可以多赚点钱,在你女神将来结婚的时候多随点钱,也显得倍儿有面儿不是。

如果你是搞IT的,那你连这个东西都不想自己动手自己搞的话,那你也别做IT这个行业了,这个行业不适合你。

 

 

百度网盘下载链接:https://pan.baidu.com/s/17Fom9-bCqwaG94Smt3K7Lw

提取码:v8aa

你可以在以下代码中找到一个基本的3D旋转相册的HTML实现: ```html <!DOCTYPE html> <html> <head> <style> .container { perspective: 1000px; width: 300px; height: 300px; } .carousel { transform-style: preserve-3d; animation: rotation 10s infinite linear; width: 100%; height: 100%; } .carousel:hover { animation-play-state: paused; } .item { position: absolute; width: 200px; height: 200px; background-color: #ddd; line-height: 200px; font-size: 48px; text-align: center; } .item:nth-child(1) { transform: rotateY(0deg) translateZ(300px); } .item:nth-child(2) { transform: rotateY(60deg) translateZ(300px); } .item:nth-child(3) { transform: rotateY(120deg) translateZ(300px); } .item:nth-child(4) { transform: rotateY(180deg) translateZ(300px); } .item:nth-child(5) { transform: rotateY(240deg) translateZ(300px); } .item:nth-child(6) { transform: rotateY(300deg) translateZ(300px); } @keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="container"> <div class="carousel"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </div> </body> </html> ``` 这段代码会创建一个带有6个项目的旋转相册,每个项目以一个方块表示,通过CSS的`transform`属性来实现旋转效果。你可以根据需要修改CSS样式和相册中的项目内容来适应你的需求。希望对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值