- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>Document</title>
- <style>
- base{
- font-size:20pt;
- font-family:"微软雅黑";
- font-weight:bold;
- width:300px;
- height:300px;
- border:1px solid #ccc;
- margin:100px auto;
- /* 设置旋转方块的相对画布 */
- -webkit-perspective:1200px;
- /* 被嵌套元素的显示模式 */
- transform-style:preserve-3d;
- transform:perspective(0px) rotatex(0deg) rotatey(00deg) rotatez(0deg);
- }
- #outside{
- width:200px;
- height:200px;
- position:relative;
- background-color:#ddd;
- transform:translatez(100px);
- transform-style:preserve-3d;
- transform-origin:100px 100px -100px;
- /*transform:rotatey(-30deg) rotatez(30deg);*/
- animation:change 2s linear 0.5s infinite;
- }
- #outside>div{
- width:200px;
- height:200px;
- text-align:center;
- line-height:200px;
- position:absolute;
- left:0px;
- top:0px;
- }
- #front{
- background-color:#f00;
- }
- #back{
- background-color:#0f0;
- transform:translatez(-200px) rotatey(180deg);
- }
- #left{
- background-color:#00f;
- /*transform:translatez(-50px);*/
- transform-origin:left top;
- transform:rotatey(90deg);
- }
- #right{
- background-color:#ff0;
- transform-origin:right top;
- transform:rotatey(90deg) translatex(200px);
- }
- #top{
- background-color:#f0f;
- transform-origin:left top;
- transform:rotatex(90deg) translatey(-200px);
- }
- #bottom{
- background-color:#f0f;
- transform-origin:right bottom;
- transform:rotatex(90deg);
- }
- @keyframes change{
- from{
- transform:rotatex(360deg) rotatey(360deg);
- }
- to{
- transform:rotatex(0deg) rotatey(0deg);
- }
- }
- </style>
- </head>
- <body>
- <!-- 外层 div 盒子 -->
- <div id="base">
- <div id="outside">
- <div id="front"> 前 </div>
- <div id="back"> 后 </div>
- <div id="left"> 左 </div>
- <div id="right"> 右 </div>
- <div id="top"> 上 </div>
- <div id="bottom"> 下 </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/20542/36d684d8a2f4b80eafc70d2f6b2dc807.html