@xunuo
2018-08-20T09:09:14.000000Z
字数 3268
阅读 910
前端
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equid=“X-UA-Compatible” content=“IE=edge, chrome=1”>
<title>旋转的正方体</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
html{/*如果时body,会出现条纹缝隙*/
background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);/*表示从中心开始以椭圆形向外部渐变,中心色为#430d6d,外部颜色为#000000即黑色*/
height: 100%;
}
#main{
width: 20em;/*16px*20=320px的边长*/
height: 20em;
position: absolute;
left: 50%;
top: 50%;
margin-left: -10em;
margin-top: -10em;
-webkit-perspective:1000px;/*物体与屏幕的位置*/
-webkit-perspective-origin:50% 50%;/*从屏幕中心观看*/
}
#cube{
-webkit-animation-name: spin; /*@keyframes动画规定的名称*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function:linear ;/*动画变化速度曲线*/
-webkit-animation-iteration-count:infinite;/*动画播放次数,infinite为无限次播放*/
-webkit-animation-delay: 1s;/*动画开始前延迟的时间*/
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style:preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);/*正方体的初始位置*/
}
#cube:hover{
-webkit-animation-play-state: paused;/*鼠标放到正方体上时暂停动画*/
}
.cube-design{
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px),
-webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);/*正方体上的网格*/
-webkit-background-size: 2.5em 2.5em;
background-color: rgba(0, 0, 0, 0.5);/*最后一个值表示透明度*/
position: absolute;
width: 100%;
height: 100%;
color: #77ffb9;
}
#face-front {
-webkit-transform: translateZ(10em);
}
#face-right{
-webkit-transform: rotateY(90deg) translateZ(10em);
}
#face-back{
-webkit-transform: rotateX(180deg) translateZ(10em);
}
#face-left{
-webkit-transform: rotateY(-90deg) translateZ(10em);
}
#face-top{
-webkit-transform: rotateX(90deg) translateZ(10em);
}
#face-bottom{
-webkit-transform: rotateX(-90deg) translateZ(10em);
}
@-webkit-keyframes spin {/*规定动画变化情况*/
from {
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg) rotateZ(0);
}
to {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div>
</div>
<div id="main">
<div id="cube">
<div id="face-front" class="cube-design">1</div>
<div id="face-right" class="cube-design">2</div>
<div id="face-back" class="cube-design">3</div>
<div id="face-left" class="cube-design">4</div>
<div id="face-top" class="cube-design">5</div>
<div id="face-bottom" class="cube-design">6</div>
</div>
</div>
<script>
var flag=false;
$('#cube').click(function(){
if(!flag){
document.getElementById('cube').style.webkitAnimationDuration='0s';
flag=true;
}
else{
document.getElementById('cube').style.webkitAnimationName="spin";
document.getElementById('cube').style.webkitAnimationDuration="10s";
document.getElementById('cube').style.webkitAnimationTimingFunction="linear";
document.getElementById('cube').style.webkitAnimationIterationCount="infinite";
flag=false;
}
});
</script>
</body>
</html>