3d------正方体
=================================正方体四个面被撑开=================================================
<!DOCTYPE>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrapper{
position:fixed;
top:30%;
left:60%;
color:#fff;
perspective:1000px;//perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上，这里是站在距离视图1000px的视角看物体
perspective-origin:300px 100px;//perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。
}
.box{
width:200px;
height:200px;
transform-style:preserve-3d;//设置3d环境
transform:rotateY(30deg);//正方体整体旋转30度
}
.side{
width:200px;
height:200px;
background:rgba(251,109,209,0.4);
text-align:center;
line-height:200px;
font-size:40px;
position:absolute;
}
.front{transform:rotateY(180deg) translateZ(200px);}
.back{transform:translateZ(200px);}
.top{transform:rotateX(-90deg) translateZ(200px);}
.bottom{transform:rotateX(90deg) translateZ(200px);}
.left{transform:rotateY(90deg) translateZ(200px);}
.right{transform:rotateY(-90deg) translateZ(200px);}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side top">3</div>
<div class="side bottom">4</div>
<div class="side left">5</div>
<div class="side right">6</div>
</div>
</div>
</body>
</html>
=================================正方体四个面合在一起=================================================
<!DOCTYPE>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrapper{
position:fixed;
top:30%;
left:60%;
color:#fff;
perspective:1000px;/*perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上，这里是站在距离视图1000px的视角看物体*/
perspective-origin:300px 100px;/*perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。*/
}
.box{
width:200px;
height:200px;
transform-style:preserve-3d;/*设置为是在3D的环境下*/
transform: rotateY(60deg);
}
.side{
width:200px;
height:200px;
background:rgba(89, 59, 80, 0.3);
text-align:center;
line-height:200px;
font-size:40px;
position:absolute;
border:2px solid #fff;
}
.front{transform:rotateY(180deg) translateZ(100px);}
.back{transform:translateZ(100px);}
.top{transform:rotateX(-90deg) translateZ(100px);}
.bottom{transform:rotateX(90deg) translateZ(100px);}
.left{transform:rotateY(90deg) translateZ(100px);}
.right{transform:rotateY(-90deg) translateZ(100px);}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side top">3</div>
<div class="side bottom">4</div>
<div class="side left">5</div>
<div class="side right">6</div>
</div>
</div>
</body>
</html>
=========================自动旋转================================
<!DOCTYPE>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrapper{
position:fixed;
top:30%;
left:60%;
color:#fff;
perspective:1000px;/*perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上，这里是站在距离视图1000px的视角看物体*/
perspective-origin:300px 100px;/*perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。*/
}
@keyframes cycle{
from{transform:rotateY(0deg)}
to{transform:rotateY(360deg)}
}
@-webkit-keyframes cycle{
from{transform:rotateY(0deg)}
to{transform:rotateY(360deg)}
}
.box{
width:200px;
height:200px;
transform-style:preserve-3d;
transform: rotateY(60deg);
animation: 3s ease 0s normal none infinite running cycle;
}
.side{
width:200px;
height:200px;
background:rgba(89, 59, 80, 0.3);
text-align:center;
line-height:200px;
font-size:40px;
position:absolute;
border:1px solid #fff;
}
.front{transform:rotateY(180deg) translateZ(100px);}
.back{transform:translateZ(100px);}
.top{transform:rotateX(-90deg) translateZ(100px);}
.bottom{transform:rotateX(90deg) translateZ(100px);}
.left{transform:rotateY(90deg) translateZ(100px);}
.right{transform:rotateY(-90deg) translateZ(100px);}
</style>
</head>
<body>
<div class="wrapper">
<div class="box r">
<div class="side front">1</div>
<div class="side back">2</div>
<div class="side top">3</div>
<div class="side bottom">4</div>
<div class="side left">5</div>
<div class="side right">6</div>
</div>
</div>
<div id="grid"></div>
<script type="text/javascript">
(function(){
var mark = false;
var xdom = document.getElementById("xline");
var ydom = document.getElementById("yline");
document.onmousedown = function(){
mark = true;
};
document.onmousemove = function(e){
if(mark){
var x = e.clientX;
var y = e.clientY;
xdom.style.left = x+"px";
ydom.style.top = y+"px";
}
};
document.onmouseup = function(){
mark = false;
}
fnMakeTb(150,150,1);
})();
var index = 1;
function changeOrigin(){
var os = document.getElementsByClassName("boxwarp2")[0];
os.className = "boxwarp2 r s"+index;
var cname = window.getComputedStyle(os).content;
document.getElementById("show").innerText = cname;
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].style.background = "red";
}
document.getElementsByClassName(cname)[0].style.background="green";
index++;
if(index>=10)index=1;
setTimeout(changeOrigin,4000);
};
changeOrigin();
function fnMakeTb(){ //生成表格100行50列，实际宽度为20（边框1+宽19）
var sTabStr="<table cellpadding=\"0\" cellspacing=\"0\" id=\"tab\">";
for(var i=0;i<100;i++){
var tempStr="<tr>";
for(var j=0;j<75;j++){
tempStr+="<td style=\"width:19px;height:19px\"> </td>";
}
tempStr+="</tr>"
sTabStr+=tempStr;
}
document.getElementById("grid").innerHTML=sTabStr; //输出表格
}
</script>
</body>
</html>
