当前位置：Gxlcms > css > 用css3简单的制作3d半透明立方体图片展示

用css3简单的制作3d半透明立方体图片展示

时间：2021-07-01 10:21:17 帮助过：41人阅读

用css3简单的制作3d半透明立方体图片展示

  1. <html>
  2. <head>
  3. <title> new document </title>
  4. <meta name="generator" content="editplus" />
  5. <meta name="author" content="" />
  6. <meta name="keywords" content="" />
  7. <meta name="description" content="" />
  8. <meta charset="utf-8"/>
  9. <style type="text/css">
  10. //css部分
  11. html{
  12. font-size:62.5%;
  13. }
  14. img{
  15. width:300px;
  16. height:300px;
  17. }
  18. #stage{
  19. //搭建一个舞台
  20. margin-top:200px;
  21. margin-left:auto;
  22. margin-right:auto;
  23. width:300px;
  24. height:300px;
  25. perspective:1200px;
  26. font-size:5em;
  27. font-weight:bold;
  28. color:#cc00ff;
  29. }
  30. .cube{
  31. //cube是正方体
  32. position:relative;
  33. transform:rotateX(-45deg) rotateY(45deg);
  34. transform-style:preserve-3d;
  35. transition: all .6s;
  36. }
  37. .side{
  38. color:blue;
  39. text-align:center;
  40. width:300px;
  41. height:300px;
  42. line-height:300px;
  43. position:absolute;
  44. background:#cc66ff;
  45. opacity:0.5;
  46. border:1px solid rgba(117,4,24,0.5);
  47. }
  48. //.front到.bottom是6个面分别进行旋转，构建出正方体的整形
  49. .front{
  50. transform:translateZ(150px);
  51. }
  52. .back{
  53. transform:rotateY(180deg) translateZ(150px);
  54. }
  55. .left{
  56. transform:rotateY(-90deg) translateZ(150px);
  57. }
  58. .right{
  59. transform:rotateY(90deg) translateZ(150px);
  60. }
  61. .top{
  62. transform:rotateX(90deg) translateZ(150px);
  63. }
  64. .bottom{
  65. transform:rotatex(-90deg) translateZ(150px);
  66. }
  67. #stage:hover .cube{
  68. //设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度
  69. transform:rotateX(-45deg) rotateY(225deg);
  70. transition:transform .6s;
  71. }
  72. </style>
  73. </head>
  74. //div部分
  75. <body>
  76. <div id="stage">
  77. <div class="cube">
  78. <div class="side front"><img src="6.gif" alt="" /></div>
  79. <div class="side back"><img src="2.jpg" alt="" /></div>
  80. <div class="side left"><img src="3.jpg" alt="" /></div>
  81. <div class="side right"><img src="4.jpg" alt="" /></div>
  82. <div class="side top"><img src="5.jpg" alt="" /></div>
  83. <div class="side bottom"><img src="1.jpg" alt="" /></div>
  84. </div>
  85. </div>
  86. </body>
  87. </html>

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！