<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[WXS]盒子机器人</title>
<meta name="author" content="WangXinsheng">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
height: 10em;
left: 50%;
margin-left: -5em;
margin-top: -5em;
/*perspective:设置元素被查看位置的视图*/
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
/*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/
position: absolute;
top: 50%;
width: 10em;
}
cube{
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg);
}
cube * {
background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1));
border: 2px solid rgba(183,154,112,1);
position: absolute;
display: block;
}
cube.header {
height: 8em;
width: 13em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.header back {
height: 8em;
width: 13em;
-webkit-transform: rotateX(180deg) translateZ(4em);
-ms-transform: rotateX(180deg) translateZ(4em);
transform: rotateX(180deg) translateZ(4em);
}
cube.header bottom {
height: 8em;
width: 13em;
-webkit-transform: rotateX(-90deg) translateZ(4em);
-ms-transform: rotateX(-90deg) translateZ(4em);
transform: rotateX(-90deg) translateZ(4em);
display:none;
}
cube.header front {
height: 8em;
width: 13em;
-webkit-transform: rotateY(0deg) translateZ(4em);
-ms-transform: rotateY(0deg) translateZ(4em);
transform: rotateY(0deg) translateZ(4em);
background:url('img/headerFront.png') no-repeat rgb(202,184,160);
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
cube.header left {
height: 8em;
width: 8em;
-webkit-transform: rotateY(-90deg) translateZ(4em);
-ms-transform: rotateY(-90deg) translateZ(4em);
transform: rotateY(-90deg) translateZ(4em);
}
cube.header right {
height: 8em;
width: 8em;
-webkit-transform: rotateY(90deg) translateZ(9em);
-ms-transform: rotateY(90deg) translateZ(9em);
transform: rotateY(90deg) translateZ(9em);
}
cube.header top {
height: 8em;
width: 13em;
-webkit-transform: rotateX(90deg) translateZ(4em);
-ms-transform:rotateX(90deg) translateZ(4em);
transform: rotateX(90deg) translateZ(4em);
}
/*------------------------------*/
cube.body.body {
height: 10em;
width: 6em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.body.body back {
height: 10em;
width: 6em;
-webkit-transform: rotateX(180deg) translateZ(3em);
-ms-transform: rotateX(180deg) translateZ(3em);
transform: rotateX(180deg) translateZ(3em);
}
cube.body.body bottom {
height: 6em;
width: 6em;
-webkit-transform: rotateX(-90deg) translateZ(7em);
-ms-transform: rotateX(-90deg) translateZ(7em);
transform: rotateX(-90deg) translateZ(7em);
}
cube.body.body front {
height: 10em;
width: 6em;
-webkit-transform: rotateY(0deg) translateZ(3em);
-ms-transform: rotateY(0deg) translateZ(3em);
transform: rotateY(0deg) translateZ(3em);
background-color:rgb(202,184,160,1);
background:url('img/bodyFront.png') no-repeat rgb(202,184,160);;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
cube.body.body left {
height: 10em;
width: 6em;
-webkit-transform: rotateY(-90deg) translateZ(3em);
-ms-transform: rotateY(-90deg) translateZ(3em);
transform: rotateY(-90deg) translateZ(3em);
}
cube.body.body right {
height: 10em;
width: 6em;
-webkit-transform: rotateY(90deg) translateZ(3em);
-ms-transform: rotateY(90deg) translateZ(3em);
transform: rotateY(90deg) translateZ(3em);
}
cube.body.body top {
height: 6em;
width: 6em;
-webkit-transform: rotateX(90deg) translateZ(3em);
-ms-transform: rotateX(90deg) translateZ(3em);
transform: rotateX(90deg) translateZ(3em);
}
/*------------------------------*/
cube.hand {
height: 8em;
width: 3em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.hand back {
height: 8em;
width: 3em;
-webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
-ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);
}
cube.hand bottom {
height: 3em;
width: 3em;
-webkit-transform: rotateX(-90deg) translateZ(9.5em);
-ms-transform: rotateX(-90deg) translateZ(9.5em);
transform: rotateX(-90deg) translateZ(9.5em);
}
cube.hand front {
height: 8em;
width: 3em;
-webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
transform: rotateY(0deg) translateZ(1.5em) translateY(3em);
}
cube.hand left {
height: 8em;
width: 3em;
-webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);
}
cube.hand right {
height: 8em;
width: 3em;
-webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
-ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
transform: rotateY(90deg) translateZ(1.5em) translateY(3em);
}
cube.hand top {
height: 3em;
width: 3em;
-webkit-transform: rotateX(90deg) translateZ(-1.5em);
-ms-transform: rotateX(90deg) translateZ(-1.5em);
transform: rotateX(90deg) translateZ(-1.5em);
}
/*------------------------------*/
cube.foot {
height: 8em;
width: 2.5em;
background:none;
border:none;
-webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
transform: translateZ(0em) rotateX(0deg) rotateY(0deg);
}
cube.foot back {
height: 8em;
width: 2.5em;
-webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
-ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);
}
cube.foot bottom {
height: 5.5em;
width: 2.5em;
-webkit-transform: rotateX(-90deg) translateZ(8.2em);
-ms-transform: rotateX(-90deg) translateZ(8.2em);
transform: rotateX(-90deg) translateZ(8.2em);
}
cube.foot front {
height: 8em;
width: 2.5em;
-webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
-ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
transform: rotateY(0deg) translateZ(2.75em) translateY(3em);
}
cube.foot left {
height: 8em;
width: 5.5em;
-webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
-ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);
}
cube.foot right {
height: 8em;
width: 5.5em;
-webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
-ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);
transform: r
评论0
最新资源