devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5+CSS实现图片3D旋转效果，附音乐_css 3d旋转的图片球

作者：很楠不爱3 | 2024-02-20 18:41:31

赞

踩

css 3d旋转的图片球

利用程序呈现图片，可以俘获一众女生的心，增加音乐可以实现图片变化的同时也带上了想要得到效果，如此一程序实乃众人之喜。

先看看程序呈现的效果，还是特别吸引人的。

先在网上爬取想要呈现的美女照片，存放在文件夹img-one，与程序路径一致。

图片像素需进行调整，同一面图片可以使用同一个图片，保持图片像素一致的同时也增加了立体感。第二张02.jpg和2.jpg可以倒着放，这样在程序实现的时候，可以和其他方向的图片一致。

从网上下载自己想要播放的音乐，保存在文件mp3内。 

接下来就是前端呈现的代码了，利用HBuilder实现HTML5代码的编写。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  8.     <link type="text/css" href="./css/style1.css" rel="stylesheet" />
  9.     <!--
  10.     	作者：ning@qq.com
  11.     	时间：2022-11-20
  12.     	描述：style1.css文件为调用图片的代码，img-one为存放图片的文件，mp3为需要播放的音乐
  13.     	需注意调整图片像素值，否则呈现不完整
  14.     -->
  15.     <style>
  16.         html,
  17.         body {
  18.             width: 100%;
  19.             height: 100%;
  20.             margin: 0;
  21.             padding: 0;
  22.             overflow: hidden;
  23.         }
  24.  
  25.         .container {
  26.             width: 100%;
  27.             height: 100%;
  28.             margin: 0;
  29.             padding: 0;
  30.             background-color: #000000;
  31.         }
  32.     </style>
  33. </head>
  34.  
  35. <body>
  36.     
  37.     <div class="m-main">
  38. 		<div class="player">
  39. 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
  40. 				<img src="./img-one/开始.png" alt="" id="img1"/>
  41.             </a>
  42. 			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
  43. 				<img src="./img-one/暂停.png" alt="" id="img2"/>
  44. 			</a>
  45. 			<div class="play-box">
  46. 				<div class="left">
  47. 					<p class="timeline"><span style=""></span></p>
  48. 					<div class="info">
  49. 						<span class="size">00:00</span>
  50. 						<span class="timeshow">00:00</span>
  51. 					</div>
  52. 				</div>
  53. 			</div>
  54. 		</div>
  55. 		<div class="video">
  56. 			<video controls autoplay name="media" id="js-video"><source src="./mp3/白月光与朱砂痣.mp3" type="video/mp4"></video>
  57. 		</div>
  58. 	</div>
  59. </div>
  60.     <div id="jsi-cherry-container" class="container">
  61.         <div class="box">
  62.             <ul class="minbox">
  63.                 <li></li>
  64.                 <li></li>
  65.                 <li></li>
  66.                 <li></li>
  67.                 <li></li>
  68.                 <li></li>
  69.             </ul>
  70.             <ol class="maxbox">
  71.                 <li></li>
  72.                 <li></li>
  73.                 <li></li>
  74.                 <li></li>
  75.                 <li></li>
  76.                 <li></li>
  77.             </ol>
  78.         </div>
  79.     </div>
  80.     <script>
  81.         $(function () {
  82.             AudioControl('js-video');
  83.  
  84.             function AudioControl(id) {
  85.                 // 音频控制进度条
  86.                 console.log(777);
  87.                 var audio = document.getElementById(id);
  88.                 $(audio).on('loadedmetadata', function () {
  89.                     audio.pause();
  90.                     // 进度条控制
  91.                     $(document).on('touchend', '.timeline', function (e) {
  92.                         var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
  93.                         var X = x < 0 ? 0 : x;
  94.                         var W = $(this).width();
  95.                         var place = X > W ? W : X;
  96.                         audio.currentTime = (place / W).toFixed(2) * audio.duration;
  97.                         $(this).children().css({
  98.                             width: (place / W).toFixed(2) * 100 + "%"
  99.                         })
  100.                     });
  101.                     // 播放
  102.                     $(document).on('click', '#js-play', function () {
  103.                         audio.play()
  104.                         $('#img1').css("display","none");
  105.                         $('#img2').css("display","block");
  106.                     });
  107.                     // 暂停
  108.                     $(document).on('click', '#js-pause', function () {
  109.                         audio.pause()
  110.                         $('#img1').css("display","block");
  111.                         $('#img2').css("display","none");
  112.                     });
  113.                 });
  114.                 setInterval(function () {
  115.                     var currentTime = audio.currentTime;
  116.                     setTimeShow(currentTime);
  117.                 }, 1000);
  118.                 // 设置播放时间
  119.                 function setTimeShow(t) {
  120.                     t = Math.floor(t);
  121.                     var playTime = secondToMin(audio.currentTime);
  122.                     $(".size").html(playTime);
  123.                     $('.timeshow').text(secondToMin(audio.duration));
  124.                     $('.timeline').children().css({
  125.                         width: (t / audio.duration).toFixed(4) * 100 + "%"
  126.                     })
  127.                 }
  128.                 // 计算时间
  129.                 function secondToMin(s) {
  130.                     var MM = Math.floor(s / 60);
  131.                     var SS = s % 60;
  132.                     if (MM < 10)
  133.                         MM = "0" + MM;
  134.                     if (SS < 10)
  135.                         SS = "0" + SS;
  136.                     var min = MM + ":" + SS;
  137.                     return min.split('.')[0];
  138.                 }
  139.             }
  140.         })
  141.         var RENDERER = {
  142.             INIT_CHERRY_BLOSSOM_COUNT: 30,
  143.             MAX_ADDING_INTERVAL: 10,
  144.  
  145.             init: function () {
  146.                 this.setParameters();
  147.                 this.reconstructMethods();
  148.                 this.createCherries();
  149.                 this.render();
  150.                 if (
  151.                     navigator.userAgent.match(
  152.                         /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  153.                     )
  154.                 ) {
  155.                     var box = document.querySelectorAll('.box')[0];
  156.                     console.log(box, '移动端');
  157.                     box.style.marginTop = '65%';
  158.                 }
  159.             },
  160.             setParameters: function () {
  161.                 this.$container = $('#jsi-cherry-container');
  162.                 this.width = this.$container.width();
  163.                 this.height = this.$container.height();
  164.                 this.context = $('<canvas />')
  165.                     .attr({
  166.                         width: this.width,
  167.                         height: this.height
  168.                     })
  169.                     .appendTo(this.$container)
  170.                     .get(0)
  171.                     .getContext('2d');
  172.                 this.cherries = [];
  173.                 this.maxAddingInterval = Math.round(
  174.                     (this.MAX_ADDING_INTERVAL * 1000) / this.width
  175.                 );
  176.                 this.addingInterval = this.maxAddingInterval;
  177.             },
  178.             reconstructMethods: function () {
  179.                 this.render = this.render.bind(this);
  180.             },
  181.             createCherries: function () {
  182.                 for (
  183.                     var i = 0,
  184.                         length = Math.round(
  185.                             (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
  186.                         ); i < length; i++
  187.                 ) {
  188.                     this.cherries.push(new CHERRY_BLOSSOM(this, true));
  189.                 }
  190.             },
  191.             render: function () {
  192.                 requestAnimationFrame(this.render);
  193.                 this.context.clearRect(0, 0, this.width, this.height);
  194.  
  195.                 this.cherries.sort(function (cherry1, cherry2) {
  196.                     return cherry1.z - cherry2.z;
  197.                 });
  198.                 for (var i = this.cherries.length - 1; i >= 0; i--) {
  199.                     if (!this.cherries[i].render(this.context)) {
  200.                         this.cherries.splice(i, 1);
  201.                     }
  202.                 }
  203.                 if (--this.addingInterval == 0) {
  204.                     this.addingInterval = this.maxAddingInterval;
  205.                     this.cherries.push(new CHERRY_BLOSSOM(this, false));
  206.                 }
  207.             }
  208.         };
  209.         var CHERRY_BLOSSOM = function (renderer, isRandom) {
  210.             this.renderer = renderer;
  211.             this.init(isRandom);
  212.         };
  213.         CHERRY_BLOSSOM.prototype = {
  214.             FOCUS_POSITION: 300,
  215.             FAR_LIMIT: 600,
  216.             MAX_RIPPLE_COUNT: 100,
  217.             RIPPLE_RADIUS: 100,
  218.             SURFACE_RATE: 0.5,
  219.             SINK_OFFSET: 20,
  220.  
  221.             init: function (isRandom) {
  222.                 this.x = this.getRandomValue(
  223.                     -this.renderer.width,
  224.                     this.renderer.width
  225.                 );
  226.                 this.y = isRandom ?
  227.                     this.getRandomValue(0, this.renderer.height) :
  228.                     this.renderer.height * 1.5;
  229.                 this.z = this.getRandomValue(0, this.FAR_LIMIT);
  230.                 this.vx = this.getRandomValue(-2, 2);
  231.                 this.vy = -2;
  232.                 this.theta = this.getRandomValue(0, Math.PI * 2);
  233.                 this.phi = this.getRandomValue(0, Math.PI * 2);
  234.                 this.psi = 0;
  235.                 this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);
  236.                 this.opacity = 0;
  237.                 this.endTheta = false;
  238.                 this.endPhi = false;
  239.                 this.rippleCount = 0;
  240.  
  241.                 var axis = this.getAxis(),
  242.                     theta =
  243.                     this.theta +
  244.                     (Math.ceil(
  245.                             -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
  246.                         ) *
  247.                         Math.PI) /
  248.                     500;
  249.                 theta %= Math.PI * 2;
  250.  
  251.                 this.offsetY =
  252.                     40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
  253.                 this.thresholdY =
  254.                     this.renderer.height / 2 +
  255.                     this.renderer.height * this.SURFACE_RATE * axis.rate;
  256.                 this.entityColor = this.renderer.context.createRadialGradient(
  257.                     0,
  258.                     40,
  259.                     0,
  260.                     0,
  261.                     40,
  262.                     80
  263.                 );
  264.                 this.entityColor.addColorStop(
  265.                     0,
  266.                     'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
  267.                 );
  268.                 this.entityColor.addColorStop(
  269.                     0.05,
  270.                     'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
  271.                 );
  272.                 this.entityColor.addColorStop(
  273.                     1,
  274.                     'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
  275.                 );
  276.                 this.shadowColor = this.renderer.context.createRadialGradient(
  277.                     0,
  278.                     40,
  279.                     0,
  280.                     0,
  281.                     40,
  282.                     80
  283.                 );
  284.                 this.shadowColor.addColorStop(
  285.                     0,
  286.                     'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)'
  287.                 );
  288.                 this.shadowColor.addColorStop(
  289.                     0.05,
  290.                     'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)'
  291.                 );
  292.                 this.shadowColor.addColorStop(
  293.                     1,
  294.                     'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)'
  295.                 );
  296.             },
  297.             getRandomValue: function (min, max) {
  298.                 return min + (max - min) * Math.random();
  299.             },
  300.             getAxis: function () {
  301.                 var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
  302.                     x = this.renderer.width / 2 + this.x * rate,
  303.                     y = this.renderer.height / 2 - this.y * rate;
  304.                 return {
  305.                     rate: rate,
  306.                     x: x,
  307.                     y: y
  308.                 };
  309.             },
  310.             renderCherry: function (context, axis) {
  311.                 context.beginPath();
  312.                 context.moveTo(0, 40);
  313.                 context.bezierCurveTo(-60, 20, -10, -60, 0, -20);
  314.                 context.bezierCurveTo(10, -60, 60, 20, 0, 40);
  315.                 context.fill();
  316.  
  317.                 for (var i = -4; i < 4; i++) {
  318.                     context.beginPath();
  319.                     context.moveTo(0, 40);
  320.                     context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);
  321.                     context.stroke();
  322.                 }
  323.             },
  324.             render: function (context) {
  325.                 var axis = this.getAxis();
  326.  
  327.                 if (
  328.                     axis.y == this.thresholdY &&
  329.                     this.rippleCount < this.MAX_RIPPLE_COUNT
  330.                 ) {
  331.                     context.save();
  332.                     context.lineWidth = 2;
  333.                     context.strokeStyle =
  334.                         'hsla(0, 0%, 100%, ' +
  335.                         (this.MAX_RIPPLE_COUNT - this.rippleCount) /
  336.                         this.MAX_RIPPLE_COUNT +
  337.                         ')';
  338.                     context.translate(
  339.                         axis.x +
  340.                         this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),
  341.                         axis.y
  342.                     );
  343.                     context.scale(1, 0.3);
  344.                     context.beginPath();
  345.                     context.arc(
  346.                         0,
  347.                         0,
  348.                         (this.rippleCount / this.MAX_RIPPLE_COUNT) *
  349.                         this.RIPPLE_RADIUS *
  350.                         axis.rate,
  351.                         0,
  352.                         Math.PI * 2,
  353.                         false
  354.                     );
  355.                     context.stroke();
  356.                     context.restore();
  357.                     this.rippleCount++;
  358.                 }
  359.                 if (axis.y < this.thresholdY || !this.endTheta || !this.endPhi) {
  360.                     if (this.y <= 0) {
  361.                         this.opacity = Math.min(this.opacity + 0.01, 1);
  362.                     }
  363.                     context.save();
  364.                     context.globalAlpha = this.opacity;
  365.                     context.fillStyle = this.shadowColor;
  366.                     context.strokeStyle =
  367.                         'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';
  368.                     context.translate(
  369.                         axis.x,
  370.                         Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y)
  371.                     );
  372.                     context.rotate(Math.PI - this.theta);
  373.                     context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
  374.                     context.translate(0, this.offsetY);
  375.                     this.renderCherry(context, axis);
  376.                     context.restore();
  377.                 }
  378.                 context.save();
  379.                 context.fillStyle = this.entityColor;
  380.                 context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';
  381.                 context.translate(
  382.                     axis.x,
  383.                     axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate)
  384.                 );
  385.                 context.rotate(this.theta);
  386.                 context.scale(axis.rate * Math.sin(this.phi), axis.rate);
  387.                 context.translate(0, this.offsetY);
  388.                 this.renderCherry(context, axis);
  389.                 context.restore();
  390.  
  391.                 if (this.y <= -this.renderer.height / 4) {
  392.                     if (!this.endTheta) {
  393.                         for (
  394.                             var theta = Math.PI / 2, end = (Math.PI * 3) / 2; theta <= end; theta += Math.PI
  395.                         ) {
  396.                             if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
  397.                                 this.theta = theta;
  398.                                 this.endTheta = true;
  399.                                 break;
  400.                             }
  401.                         }
  402.                     }
  403.                     if (!this.endPhi) {
  404.                         for (
  405.                             var phi = Math.PI / 8, end = (Math.PI * 7) / 8; phi <= end; phi += (Math.PI * 3) / 4
  406.                         ) {
  407.                             if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
  408.                                 this.phi = Math.PI / 8;
  409.                                 this.endPhi = true;
  410.                                 break;
  411.                             }
  412.                         }
  413.                     }
  414.                 }
  415.                 if (!this.endTheta) {
  416.                     if (axis.y == this.thresholdY) {
  417.                         this.theta +=
  418.                             (Math.PI / 200) *
  419.                             (this.theta < Math.PI / 2 ||
  420.                                 (this.theta >= Math.PI && this.theta < (Math.PI * 3) / 2) ?
  421.                                 1 :
  422.                                 -1);
  423.                     } else {
  424.                         this.theta += Math.PI / 500;
  425.                     }
  426.                     this.theta %= Math.PI * 2;
  427.                 }
  428.                 if (this.endPhi) {
  429.                     if (this.rippleCount == this.MAX_RIPPLE_COUNT) {
  430.                         this.psi += this.dpsi;
  431.                         this.psi %= Math.PI * 2;
  432.                     }
  433.                 } else {
  434.                     this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500);
  435.                     this.phi %= Math.PI;
  436.                 }
  437.                 if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
  438.                     this.x += 2;
  439.                     this.y = -this.renderer.height * this.SURFACE_RATE;
  440.                 } else {
  441.                     this.x += this.vx;
  442.                     this.y += this.vy;
  443.                 }
  444.                 return (
  445.                     this.z > -this.FOCUS_POSITION &&
  446.                     this.z < this.FAR_LIMIT &&
  447.                     this.x < this.renderer.width * 1.5
  448.                 );
  449.             }
  450.         };
  451.         $(function () {
  452.             console.log(6666);
  453.             RENDERER.init();
  454.         });
  455.     </script>
  456.     <style>
  457.         html,
  458.         body {
  459.             width: 100%;
  460.             height: 100%;
  461.             margin: 0;
  462.             padding: 0;
  463.             overflow: hidden;
  464.         }
  465.  
  466.         .container {
  467.             width: 100%;
  468.             height: 100%;
  469.             margin: 0;
  470.             padding: 0;
  471.             background-color: #000000;
  472.         }
  473.     </style>
  474. </body>
  475.  
  476. </html>

css文件是设置图片路径的代码，先命名为css，可以修改，放置路径需和Html文件一致。

 

  1. @charset "utf-8";
  2.  
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. body {
  9.     max-width: 100%;
  10.     min-width: 100%;
  11.     height: 100%;
  12.     background-size: cover;
  13.     background-repeat: no-repeat;
  14.     background-attachment: fixed;
  15.     background-size: 100% 100%;
  16.     position: absolute;
  17.     margin-left: auto;
  18.     margin-right: auto;
  19. }
  20.  
  21. /*背景音乐*/
  22. .m-main {
  23.     width: 380px;
  24.     height: 60px;
  25.     margin: 0 auto;
  26.     position: fixed;
  27.     right: 30px;
  28. }
  29.  
  30. .m-main video {
  31.     display: none;
  32. }
  33.  
  34. .m-main .player {
  35.     width: 100%;
  36.     height: 60px;
  37.     position: relative;
  38.     bottom: 0;
  39. }
  40.  
  41. .m-main .player>a {
  42.     display: inline-block;
  43.     width: 20px;
  44.     margin: 0 auto;
  45.     padding: 10px;
  46.     color: #FFF;
  47.     text-align: center;
  48.     float: left;
  49.     font-size: 12px
  50. }
  51.  
  52. .m-main .player>a img {
  53.     width: 30px;
  54.     height: 30px;
  55.     position: absolute;
  56.     top: 20px;
  57.     left: 41px;
  58. }
  59.  
  60. #img1 {
  61.     display: block;
  62. }
  63.  
  64. #img2 {
  65.     display: none;
  66. }
  67.  
  68. .m-main .play-box {
  69.     width: 300px;
  70.     height: 60px;
  71.     margin: 0 auto;
  72.     position: absolute;
  73.     top: 0;
  74.     right: 0;
  75. }
  76.  
  77. .m-main .play-box .left {
  78.     width: 100%;
  79.     float: left;
  80. }
  81.  
  82. .m-main .play-box .left p.timeline {
  83.     width: 33%;
  84.     height: 10px;
  85.     background-color: rgba(216, 216, 216, 0.5);
  86.     border-radius: 5px;
  87.     margin: 30px auto 0;
  88.     position: relative;
  89.     z-index: 2;
  90. }
  91.  
  92. .m-main .play-box .left p.timeline span {
  93.     position: relative;
  94.     width: 0;
  95.     height: 10px;
  96.     background-color: #D3EEDF;
  97.     border-radius: 5px;
  98.     display: block;
  99.     -webkit-transition: width ease-out 0.3s;
  100.     -o-transition: width ease-out 0.3s;
  101.     transition: width ease-out 0.3s;
  102. }
  103.  
  104. .m-main .play-box .left p.timeline span:after {
  105.     content: "";
  106.     position: absolute;
  107.     top: -4px;
  108.     right: -0.6rem;
  109.     width: 1.2rem;
  110.     height: 1.2rem;
  111.     border-radius: 50%;
  112.     background-color: green;
  113. }
  114.  
  115. .m-main .play-box .left div.info {
  116.     height: 26px;
  117.     line-height: 26px;
  118.     font-size: 14px;
  119.     color: #9A9A9A;
  120.     position: relative;
  121.     top: -18px;
  122.     margin: 0 10px;
  123.     z-index: 1;
  124. }
  125.  
  126. .m-main .play-box .left div.info .size {
  127.     float: left;
  128.     display: block;
  129. }
  130.  
  131. .m-main .play-box .left div.info .timeshow {
  132.     float: right;
  133.     display: block;
  134.     margin-right: 30px
  135. }
  136.  
  137. /* ----------------------------------------------- */
  138. li {
  139.     list-style: none;
  140. }
  141.  
  142. .box {
  143.     width: 200px;
  144.     height: 200px;
  145.     background-size: cover;
  146.     background-repeat: no-repeat;
  147.     background-attachment: fixed;
  148.     background-size: 100% 100%;
  149.     position: absolute;
  150.     margin-left: 42%;
  151.     margin-top: 22%;
  152.     -webkit-transform-style: preserve-3d;
  153.     -webkit-transform: rotateX(13deg);
  154.     -webkit-animation: move 5s linear infinite;
  155. }
  156.  
  157. .minbox {
  158.     width: 100px;
  159.     height: 100px;
  160.     position: absolute;
  161.     left: 50px;
  162.     top: 30px;
  163.     -webkit-transform-style: preserve-3d;
  164. }
  165.  
  166. .minbox li {
  167.     width: 100px;
  168.     height: 100px;
  169.     position: absolute;
  170.     left: 0;
  171.     top: 0;
  172. }
  173.  
  174. .minbox li:nth-child(1) {
  175.     background: url(../img-one/01.jpg) no-repeat;
  176. 	background-size: cover;
  177.     -webkit-transform: translateZ(50px);
  178. }
  179.  
  180. .minbox li:nth-child(2) {
  181.     background: url(../img-one/02.jpg) no-repeat;
  182. 	background-size: cover;
  183.     -webkit-transform: rotateX(180deg) translateZ(50px);
  184.     /* transform: rotate(180deg); */
  185. }
  186.  
  187. .minbox li:nth-child(3) {
  188.     background: url(../img-one/03.jpg) no-repeat;
  189. 	background-size: cover;
  190.     -webkit-transform: rotateX(-90deg) translateZ(50px);
  191. }
  192.  
  193. .minbox li:nth-child(4) {
  194.     background: url(../img-one/04.jpg) no-repeat;
  195. 	background-size: cover;
  196.     -webkit-transform: rotateX(90deg) translateZ(50px);
  197. }
  198.  
  199. .minbox li:nth-child(5) {
  200.     background: url(../img-one/05.jpg) no-repeat;
  201. 	background-size: cover;
  202.     -webkit-transform: rotateY(-90deg) translateZ(50px);
  203. }
  204.  
  205. .minbox li:nth-child(6) {
  206.     background: url(../img-one/06.jpg) no-repeat;
  207. 	background-size: cover;
  208.     -webkit-transform: rotateY(90deg) translateZ(50px);
  209. }
  210.  
  211. .maxbox li:nth-child(1) {
  212.     background: url(../img-one/1.jpg) no-repeat 0 0;
  213. 	background-size: cover;
  214.     -webkit-transform: translateZ(50px);
  215. }
  216.  
  217. .maxbox li:nth-child(2) {
  218.     background: url(../img-one/2.jpg) no-repeat 0 0;
  219.     -webkit-transform: translateZ(50px);
  220. 	background-size: cover;
  221.     /* transform: rotate(180deg); */
  222. }
  223.  
  224. .maxbox li:nth-child(3) {
  225.     background: url(../img-one/3.jpg) no-repeat 0 0;
  226. 	background-size: cover;
  227.     -webkit-transform: rotateX(-90deg) translateZ(50px);
  228. }
  229.  
  230. .maxbox li:nth-child(4) {
  231.     background: url(../img-one/4.jpg) no-repeat 0 0;
  232. 	background-size: cover;
  233.     -webkit-transform: rotateX(90deg) translateZ(50px);
  234. }
  235.  
  236. .maxbox li:nth-child(5) {
  237.     background: url(../img-one/5.jpg) no-repeat 0 0;
  238. 	background-size: cover;
  239.     -webkit-transform: rotateY(-90deg) translateZ(50px);
  240. }
  241.  
  242. .maxbox li:nth-child(6) {
  243.     background: url(../img-one/6.jpg) no-repeat 0 0;
  244. 	background-size: cover;
  245.     -webkit-transform: rotateY(90deg) translateZ(50px);
  246. }
  247.  
  248. .maxbox {
  249.     width: 800px;
  250.     height: 400px;
  251.     position: absolute;
  252.     left: 0;
  253.     top: -20px;
  254.     -webkit-transform-style: preserve-3d;
  255. }
  256.  
  257. .maxbox li {
  258.     width: 200px;
  259.     height: 200px;
  260.     background: #fff;
  261.     border: 1px solid #ccc;
  262.     position: absolute;
  263.     left: 0;
  264.     top: 0;
  265.     opacity: 0.2;
  266.     -webkit-transition: all 1s ease;
  267. }
  268.  
  269. .maxbox li:nth-child(1) {
  270.     -webkit-transform: translateZ(100px);
  271. }
  272.  
  273. .maxbox li:nth-child(2) {
  274.     -webkit-transform: rotateX(180deg) translateZ(100px);
  275. }
  276.  
  277. .maxbox li:nth-child(3) {
  278.     -webkit-transform: rotateX(-90deg) translateZ(100px);
  279. }
  280.  
  281. .maxbox li:nth-child(4) {
  282.     -webkit-transform: rotateX(90deg) translateZ(100px);
  283. }
  284.  
  285. .maxbox li:nth-child(5) {
  286.     -webkit-transform: rotateY(-90deg) translateZ(100px);
  287. }
  288.  
  289. .maxbox li:nth-child(6) {
  290.     -webkit-transform: rotateY(90deg) translateZ(100px);
  291. }
  292.  
  293. .box:hover ol li:nth-child(1) {
  294.     -webkit-transform: translateZ(300px);
  295.     width: 400px;
  296.     height: 400px;
  297.     opacity: 0.8;
  298.     left: -100px;
  299.     top: -100px;
  300. }
  301.  
  302. .box:hover ol li:nth-child(2) {
  303.     -webkit-transform: rotateX(180deg) translateZ(300px);
  304.     width: 400px;
  305.     height: 400px;
  306.     opacity: 0.8;
  307.     left: -100px;
  308.     top: -100px;
  309. }
  310.  
  311. .box:hover ol li:nth-child(3) {
  312.     -webkit-transform: rotateX(-90deg) translateZ(300px);
  313.     width: 400px;
  314.     height: 400px;
  315.     opacity: 0.8;
  316.     left: -100px;
  317.     top: -100px;
  318. }
  319.  
  320. .box:hover ol li:nth-child(4) {
  321.     -webkit-transform: rotateX(90deg) translateZ(300px);
  322.     width: 400px;
  323.     height: 400px;
  324.     opacity: 0.8;
  325.     left: -100px;
  326.     top: -100px;
  327. }
  328.  
  329. .box:hover ol li:nth-child(5) {
  330.     -webkit-transform: rotateY(-90deg) translateZ(300px);
  331.     width: 400px;
  332.     height: 400px;
  333.     opacity: 0.8;
  334.     left: -100px;
  335.     top: -100px;
  336. }
  337.  
  338. .box:hover ol li:nth-child(6) {
  339.     -webkit-transform: rotateY(90deg) translateZ(300px);
  340.     width: 400px;
  341.     height: 400px;
  342.     opacity: 0.8;
  343.     left: -100px;
  344.     top: -100px;
  345. }
  346.  
  347. @keyframes move {
  348.     0% {
  349.         -webkit-transform: rotateX(13deg) rotateY(0deg);
  350.     }
  351.  
  352.     100% {
  353.         -webkit-transform: rotateX(13deg) rotateY(360deg);
  354.     }
  355. }

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号