<script src="https://blog-static.cnblogs.com/files/php-linux/mouse.js"> </script>
<link type="text/css" rel="styleSheet"  href="https://blog-static.cnblogs.com/files/php-linux/my.css" />
<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
	// hide #back-top first
	$("#back-top").hide();
	// fade in #back-top
	$(window).scroll(function() {
		if ($(this).scrollTop() > 500) {
			$('#back-top').fadeIn();
		} else {
			$('#back-top').fadeOut();
		}
	});
	// scroll body to 0px on click
	$('#back-top a').click(function() {
		$('body,html').animate({
			scrollTop: 0
		}, 800);
		return false;
	});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

<div id="wrap">
    <!--部署内外层图片-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_1.jpg" class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_2.jpg" class="pic">
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_3.jpg" class="pic">
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_4.jpg" class="pic">
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_5.jpg" class="pic">
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_6.jpg" class="pic">
        </div>
  
        <!--小正方体 -->
        <span class="in_front">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_8.jpg" class="in_pic">
            </span>
        <span class="in_back">
                 <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_9.jpg" class="in_pic">
            </span>
        <span class="in_left">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_10.jpg" class="in_pic">
            </span>
        <span class="in_right">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_11.jpg" class="in_pic">
            </span>
        <span class="in_top">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_12.jpg" class="in_pic">
            </span>
        <span class="in_bottom">
                <img src="https://www.cnblogs.com/images/cnblogs_com/php-linux/674292/o_7.jpg" class="in_pic">
            </span>
    </div>
 
    <style>
        /*最外层容器样式*/
        #wrap {
            /* width: 100px; */
            height: 100px;
            margin-left: 1012px;
            position: absolute;
            margin-top: 300px;
            z-index:999;
        }
  
        /*得到立方体效果*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            /*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
            animation: rotate linear 20s infinite;
        }
  
        /*动画旋转的方式*/
        /*得到动画效果*/
        @-moz-keyframes rotate {                     /*firefox*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-webkit-keyframes rotate {                /*sofari chrome*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        @-o-keyframes rotate {                    /*opera*/
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /*每张图片的样式*/
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.;
            /*过渡效果*/
            transition: all .4s;
        }
  
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
  
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
  
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
  
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
  
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
  
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
  
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
  
        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
  
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
  
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
  
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
  
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
  
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
  
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
  
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
  
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
  
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
  
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
  
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
  
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
  
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
 
  </div>