..._3d立体旋转相册源代码">
devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

3d立方体旋转相册_3d立体旋转相册源代码

作者：AllinToyou | 2024-02-15 20:36:47

赞

踩

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

 

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

 

复制完成后如图：

 

重命名为： 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/1W4z8X7pPpcdqIzbURrvKlg 
提取码：rn0q

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/86766
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号