您的位置：首页 > Web前端 > CSS

css制作旋转的正方体

2015-06-29 20:34 573 查看

1.style样式

/*三维视角*/

.D3-frame{
height:100%;
width:100%;
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow:hidden;
perspective:800;
perspective-origin:50% 50%;

}

/*水平旋转*/

@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }

}

/*垂直旋转*/

@keyframes spin1 {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }

}

/*三维视图水平旋转*/

#D3-grounp{
width:400px;
height:400px;
-webkit-transform-style:preserve-3d;
position:relative;
margin:20% auto;
-webkit-transform:rotateY(0deg);
animation: spin 5s infinite linear;

}

.D3-grounp-verticle{
width:400px;
height:400px;
-webkit-transform-style:preserve-3d;
position:relative;
margin:20% auto;
-webkit-transform:rotateY(0deg);
animation: spin1 5s infinite linear!important;

}

/*个个边的属性*/

.page{
font-size:200px;
font-weight:bold;
padding:20px;
color:white;
width:200px;
height:200px;
text-align:center;
line-height:200px;
position:absolute;

}

/*前面*/

#front {
-webkit-transform: translateZ(140px);
background:yellow;
opacity:0.5;

}

/*后面*/

#back {
transform: translateZ(-100px) rotateY(180deg);
-webkit-transform: tr
anslateZ(-100px) rotateY(180deg);
background:red;
opacity:0.5;

}

/*右面*/

#right {
-webkit-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
background:blue;
opacity:0.5;

}

/*左面*/

#left {
-webkit-transform:translateZ(-100px) rotateY(-90deg) ;
-webkit-transform-origin: left top;
background:#DC8;
opacity:0.5;

}

/*中间的图片*/

#mid{
-webkit-transform: translateZ(20px);
-webkit-transform-origin:left top;
background-image:url("../image/middle.jpg");
background-size:100% 100%;

}

/*上面*/

#up{
-webkit-transform: rotateX(90deg) translateY(-100px);
-webkit-transform-origin: left top;
background:black;
opacity:0.5;

}

/*下面*/

#down{
-webkit-transform:translateZ(-100px) rotateX(-90deg) ;
-webkit-transform-origin: bottom center;
background:#DDD;
opacity:0.5;

}

2.html文件

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="./style/mystyle.css" />

<script src="./js/jquery-1.11.1.js"></script>

<script src="./js/main.js"></script>

</head>

<body>

<header>

</header>

<div class="D3-frame">

<div class="" id="D3-grounp">

<div class="page" id="left">1</div>

<div class="page" id="right">2</div>

<div class="page" id="up">3</div>

<div class="page" id="mid"> </div>

<div class="page" id="down">4</div>

<div class="page" id="back">5</div>

<div class="page" id="front">6</div>

</div>

</div>

</body>

</html>

3.js文件

$(function(){
setInterval(function()
{
$("#D3-grounp").toggleClass("D3-grounp-verticle");
},3000);

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html5 jquery 3d 正方形

相关文章推荐

新的分享

章节导航