• HTML5+CSS实现图片3D旋转效果，附音乐

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

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

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

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

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

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

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

     

  • 相关阅读:
    【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘
    Go 语言搭建个人博客（qiucode.cn 重构篇 三）
    从零到一学FFmpeg：av_packet_rescale_ts 函数详析与实战
    （二）Shell编程之运行方式、注释、变量
    vue安装步骤
    基于Python的性能优化
    【SpringBoot3+Vue3】四【基础篇】-前端（vue基础）
    链式二叉树（1）
    吉祥止止 | 天空卫士旗下两家公司分别荣获“国家专精特新小巨人”和“北京市专精特新”企业
    Webpack打包生产环境进行优化处理
  • 原文地址：https://blog.csdn.net/qq_45222550/article/details/127950937