<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
</head>
<style type="text/css">
*{
box-sizing:border-box;
}
body{
background-color: #477286;
}
.wrap{
width: 50%;
height: auto;
position: relative;
float: auto;
margin: auto;
padding-top: 30vh;
margin-bottom: 20vh;
padding-bottom: 30vh;
}
h1{
font-size: 5vh;
display: block;
}
.cube{
width:200px;
height:200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*ÔÈËÙ*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 320px;
height: 320px;
opacity: 1;
transition: all .5s;
}
/**/
.pic{
width: 320px;
height: 320px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(160px);
}
.cube .out_back{
transform: translateZ(-160px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(160px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(160px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(160px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(160px);
}
/*¶¨ÒåСÕý·½ÌåÑùʽ*/
.cube span{
display: block;
width: 160px;
height: 160px;
position: absolute;
top: 80px;
left: 80px;
}
.cube .in_pic{
width: 160px;
height: 160px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(80px);
}
.cube .in_back{
transform: translateZ(-80px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(80px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(80px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(80px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(80px);
}
/*Êó±êÒÆÈëºóÑùʽ*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(400px);
opacity: 0.7;
}
.cube:hover .out_back{
transform: translateZ(-400px) rotateY(180deg);
opacity: 0.7;
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(400px);
opacity: 0.7;
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(400px);
opacity: 0.7;
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(400px);
opacity: 0.7;
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(400px);
opacity: 0.7;
}
[title]span{
font-size: 2rem;
display: block;
color: orange;
background-color: green;
}
</style>
<body>
<h1 align="center">1</h1>
<section>
<div class="wrap" align="center">
<div class="cube">
<div class="out_front">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="pic">
</div>
<div class="out_back">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="pic">
</div>
<div class="out_left">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="pic">
</div>
<div class="out_right">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="pic">
</div>
<div class="out_top">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="pic">
</div>
<div class="out_bottom">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none"title="1" class="pic">
</div>
<span class="in_front">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="in_pic">
</span>
<span class="in_back">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none"title="1" class="in_pic">
</span>
<span class="in_left">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="in_pic">
</span>
<span class="in_right">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="in_pic">
</span>
<span class="in_top">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="in_pic">
</span>
<span class="in_bottom">
<img src="https://chi01pap002files.storage.live.com/y4m_lyZWoOqxp0qz2vgvNOWvrxuayBHe0AT7kw8-qHtNDG3wfTbkFovEyKLy_W_JsPP_VNb1wqbqHd5vLzznObWCp_X4c3BJLU59LNmrvoKKMuPDlwQH90SpIjxh9gBS5h9sYbu7HfxuT6fM2nbmK4_rDtlXKDo5HPbZFMxQ8KfI722dHhzDsU-I2bAayt70Sty?width=626&height=626&cropmode=none" title="1" class="in_pic">
</span>
</div>
</div>
</section>
<script>
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 70px;height: 70px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -35px;}.heart:before{left: -35px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);</script>
</body>
</html>
把所有方块的px转换成vw就行了