css制作旋转的正方体

最新推荐文章于 2023-03-13 22:43:54 发布

西安小哥

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量1.1k

点赞数

分类专栏： html5 css 文章标签： css html5 jquery 3d 正方形

本文链接：https://blog.csdn.net/win_liudan/article/details/46686431

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

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);

})

西安小哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css制作旋转的正方体

1.style样式/*三维视角*/.D3-frame{height:100%;width:100%;-webkit-perspective:800;-webkit-perspective-origin:50% 50%;overflow:hidden;perspective:800;perspective-origin:50% 50%;}/*水平旋
复制链接

扫一扫