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

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

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

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

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

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link type="text/css" href="./css/style1.css" rel="stylesheet" />
    <!--
    	作者：[email protected]
    	时间：2022-11-20
    	描述：style1.css文件为调用图片的代码，img-one为存放图片的文件，mp3为需要播放的音乐
    	需注意调整图片像素值，否则呈现不完整
    -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
</head>

<body>
    
    <div class="m-main">
		<div class="player">
			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">
				<img src="./img-one/开始.png" alt="" id="img1"/>
            </a>
			<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">
				<img src="./img-one/暂停.png" alt="" id="img2"/>
			</a>
			<div class="play-box">
				<div class="left">
					<p class="timeline"><span style=""></span></p>
					<div class="info">
						<span class="size">00:00</span>
						<span class="timeshow">00:00</span>
					</div>
				</div>
			</div>
		</div>
		<div class="video">
			<video controls autoplay name="media" id="js-video"><source src="./mp3/白月光与朱砂痣.mp3" type="video/mp4"></video>
		</div>
	</div>
</div>
    <div id="jsi-cherry-container" class="container">
        <div class="box">
            <ul class="minbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ol class="maxbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <script>
        $(function () {
            AudioControl('js-video');

            function AudioControl(id) {
                // 音频控制进度条
                console.log(777);
                var audio = document.getElementById(id);
                $(audio).on('loadedmetadata', function () {
                    audio.pause();
                    // 进度条控制
                    $(document).on('touchend', '.timeline', function (e) {
                        var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
                        var X = x < 0 ? 0 : x;
                        var W = $(this).width();
                        var place = X > W ? W : X;
                        audio.currentTime = (place / W).toFixed(2) * audio.duration;
                        $(this).children().css({
                            width: (place / W).toFixed(2) * 100 + "%"
                        })
                    });
                    // 播放
                    $(document).on('click', '#js-play', function () {
                        audio.play()
                        $('#img1').css("display","none");
                        $('#img2').css("display","block");
                    });
                    // 暂停
                    $(document).on('click', '#js-pause', function () {
                        audio.pause()
                        $('#img1').css("display","block");
                        $('#img2').css("display","none");
                    });
                });
                setInterval(function () {
                    var currentTime = audio.currentTime;
                    setTimeShow(currentTime);
                }, 1000);
                // 设置播放时间
                function setTimeShow(t) {
                    t = Math.floor(t);
                    var playTime = secondToMin(audio.currentTime);
                    $(".size").html(playTime);
                    $('.timeshow').text(secondToMin(audio.duration));
                    $('.timeline').children().css({