用CSS3写一个立方体
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> /*设置300px的景深 景深基点为左侧*/ .wrap{width:100px;height:100px;padding:100px; border:5px solid #000; margin:100px auto; -webkit-perspective:300px;-webkit-perspective-origin:left center;} /*建立立体空间并设置变换基点在立方体的center处*/ .box{width:100px;height:100px;background:red; position:relative; -webkit-transform-style:preserve-3d; transition:2s; -webkit-transform-origin:center center -50px;} .box div{width:100px;height:100px; position:absolute; color:#fff;font-size:50px; text-align:center;line-height:100px;} .box div:nth-of-type(1){left:0;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);} .box div:nth-of-type(2){left:-100px;top:0px;background:#CF3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);} .box div:nth-of-type(3){left:0px;top:0px;background:#CCF;} .box div:nth-of-type(4){left:100px;top:0;background:#0C9;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);} .box div:nth-of-type(5){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);} .box div:nth-of-type(6){left:0;top:0;background:#F0C;-webkit-transform:translateZ(-100px) rotateX(180deg);} .wrap:hover .box{ -webkit-transform:rotateX(180deg);} </style> </head> <body> <div class="wrap"> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html>
梦想可触