“21天好习惯”第一期-7

最近在回忆jQuery。等复习的差不多了在用jQuery写点东西。

今天就简单用CSS做了一个模型。

<div id="father">
			<div class="ground">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="zuzi zuzi1">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="zuzi zuzi2">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="zuzi zuzi3">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="zuzi zuzi4">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="ganzi ganzi1">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
			<div class="ganzi ganzi2">
				<div class="top"></div>
				<div class="botton"></div>
				<div class="left"></div>
				<div class="right"></div>
				<div class="back"></div>
				<div class="front"></div>
			</div>
		</div>

CSS

* {
					margin: 0;
					padding: 0;
				}
				body {
					//perspective: 500px;
										
				}
				#father {
					position: relative;
					margin: 150px auto;
					width: 600px;
					height: 300px;
					transform-style: preserve-3d;
					transform:  rotateX(-10deg) rotateY(90deg);
					animation:name 6s infinite;
				}
				@keyframes name{
					
					0% {
						transform:  rotateX(-10deg) rotateY(90deg);
					}
					100% {
						transform:  rotateX(-370deg) rotateY(450deg);
						}
				}
				.ground,.zuzi,.ganzi {
					transform-style: preserve-3d;
				}
				.ground {
					position: absolute;
					top: 300px;
					left: 50px;
				}
				.zuzi1 {
					position: absolute;
					top: 152px;
					left: 150px;
					transform: translateZ(-50px);
				}
				.zuzi2 {
					position: absolute;
					top: 152px;
					left: 150px;
					transform: translateZ(60px);
				}
				.zuzi3 {
					position: absolute;
					top: 152px;
					left: 480px;
					transform: translateZ(-50px);
				}
				.zuzi4 {
					position: absolute;
					top: 152px;
					left: 480px;
					transform: translateZ(60px);
				}
				.ganzi1 {
					position: absolute;
					top: 152px;
					left: 335px;
					transform: translateZ(161px) rotateY(90deg);
				}
				.ganzi2 {
					position: absolute;
					top: 152px;
					left: 335px;
					transform: translateZ(271px) rotateY(90deg);
				}
				.ground div {
					position: absolute;
					background-color: #5f3c35;
					border: #000000 1px solid;
					//opacity: 0.7;
				}
				.ground .left,.ground .right {
					width: 150px;
					height: 50px;
				}
				.ground .left {
					//background-color: #000000;
					transform:  rotateY(-90deg);
				}
				.ground .right {
					//background-color: #008000;
					transform: translateX(400px) rotateY(-90deg);;
				}
				.ground .back {
					//background-color: #00FFFF;
					width: 400px;
					height: 50px;
					transform: translateX(75px) translateZ(-75px);
				}
				.ground .top {
					//background-color: red;
					width: 400px;
					height: 150px;
					transform: translateX(75px) translateY(-75px) rotateX(90deg);
				}
				.ground .botton {
					//background-color: #8A6D3B;
					width: 400px;
					height: 150px;
					transform: translateX(75px) translateY(-25px) rotateX(90deg);
				}
				.ground .front {
					//background-color: #FDFC01;
					width: 400px;
					height: 50px;
					transform: translateX(75px) translateZ(75px);
				}
				.zuzi div {
					position: absolute;
					background-color: #595959;
					border: 1px black solid;
					opacity: 0.7;
				}
				.zuzi .left {
					//background-color: black;
					width: 10px;
					height: 150px;
					transform: rotateY(90deg);
				}
				.zuzi .right {
					//background-color: #008000;
					width: 10px;
					height: 150px;
					transform: translateX(10px) rotateY(90deg);
				}
				.zuzi .back {
					//background-color: #D92142;
					width: 10px;
					height: 150px;
					transform: translateX(5px) translateZ(-5px);
				}
				.zuzi .top {
					//background-color: #768FAF;
					width: 10px;
					height: 10px;
					transform: translateX(5px) translateY(-5px) rotateX(-90deg);
				}
				.zuzi .botton {
					//background-color: #FF7F00;
					width: 10px;
					height: 10px;
					transform: translateX(5px) translateY(145px) rotateX(-90deg);
				}
				.zuzi .front {
					//background-color: blueviolet;
					width: 10px;
					height: 150px;
					transform: translateX(5px) translateZ(5px);
				}
				.ganzi div {
					position: absolute;
				}
				.ganzi .left {
					background-color: #008000;
					width: 400px;
					height: 10px;
					transform: rotateY(90deg);
				}
				.ganzi .right {
					background-color: #768FAF;
					width: 400px;
					height: 10px;
					transform: translateX(25px) rotateY(90deg);
				}
				.ganzi .back {
					background-color: #8A6D3B;
					width: 25px;
					height: 10px;
					transform: translateX(200px) translateZ(-200px);
				}
				.ganzi .botton {
				    background-color: #FF7F00;
				    width: 25px;
				    height: 400px;
				    transform: translateX(200px) translateY(-190px) rotateX(90deg);
				}
				.ganzi .top {
				    background-color: #00FFFF;
				    width: 25px;
				    height: 400px;
				    transform: translateX(200px) translateY(-200px) rotateX(90deg);
				}
				.ganzi .front {
					background-color: #8A6D3B;
					width: 25px;
					height: 10px;
					transform: translateX(200px) translateZ(200px);
				}

效果图