css3 3d 魔方
<style><!--
@charset "UTF-8"; * { margin: 0; padding: 0 } html,body{ width: 100%; height: 100%;
}
.container { text-align: center; margin: 50px auto; width: 200px;
}
.cube { transform-style: preserve-3d; -webkit-transform-origin: 54px 54px 54px; -moz-transform-origin: 54px 54px 54px; -ms-transform-origin: 54px 54px 54px; -o-transform-origin: 54px 54px 54px; transform-origin: 54px 54px 54px; -webkit-animation: cube ease-in-out 6s infinite forwards; -o-animation: cube ease-in-out 6s infinite forwards; animation: cube ease-in-out 6s infinite forwards;
} @keyframes cube { from, to {
} 16% { transform: rotatey(-90deg);
} 33% { transform: rotatey(-90deg) rotatez(135deg);
} 50% { transform: rotatey(225deg) rotatez(135deg);
} 66% { transform: rotatey(135deg) rotatex(135deg);
} 83% { transform: rotatex(135deg);
}
}
.page { width: 108px; height: 108px; position: absolute;
}
.page .row { width: 108px; height: 36px; float: left;
}
.page span { display: inline-block; width: 30px; height: 30px; border: 3px solid #000; border-radius: 5px;
}
.up { -webkit-transform: translateY(54px) rotateX(90deg); -moz-transform: translateY(54px) rotateX(90deg); -ms-transform: translateY(54px) rotateX(90deg); -o-transform: translateY(54px) rotateX(90deg); transform: translateY(54px) rotateX(90deg);
}
.down { -webkit-transform: translateY(-54px) rotateX(-90deg); -moz-transform: translateY(-54px) rotateX(-90deg); -ms-transform: translateY(-54px) rotateX(-90deg); -o-transform: translateY(-54px) rotateX(-90deg); transform: translateY(-54px) rotateX(-90deg);
}
.front { -webkit-transform: translateZ(54px); -moz-transform: translateZ(54px); -ms-transform: translateZ(54px); -o-transform: translateZ(54px); transform: translateZ(54px);
}
.back { -webkit-transform: translateZ(-54px); -moz-transform: translateZ(-54px); -ms-transform: translateZ(-54px); -o-transform: translateZ(-54px); transform: translateZ(-54px);
}
.left { -webkit-transform: translateX(-54px) rotateY(-90deg); -moz-transform: translateX(-54px) rotateY(-90deg); -ms-transform: translateX(-54px) rotateY(-90deg); -o-transform: translateX(-54px) rotateY(-90deg); transform: translateX(-54px) rotateY(-90deg);
}
.right { -webkit-transform: translateX(54px) rotateY(90deg); -moz-transform: translateX(54px) rotateY(90deg); -ms-transform: translateX(54px) rotateY(90deg); -o-transform: translateX(54px) rotateY(90deg); transform: translateX(54px) rotateY(90deg);
} span.white { background: white } span.yellow { background: yellow } span.blue { background: blue } span.green { background: green } span.orange { background: orange } span.red { background: red }
--></style>
<!-- 上黄下白 前蓝后绿 左橙右红 -->
<div id="container" class="container">
<div id="cube" class="cube">
<div id="up" class="page up">
<div class="row row1"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div>
<div class="row row2"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div>
<div class="row row3"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div>
</div>
<div id="down" class="page down">
<div class="row row1"><span class="white"></span><span class="white"></span><span class="white"></span></div>
<div class="row row2"><span class="white"></span><span class="white"></span><span class="white"></span></div>
<div class="row row3"><span class="white"></span><span class="white"></span><span class="white"></span></div>
</div>
<div id="front" class="page front">
<div class="row row1"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div>
<div class="row row2"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div>
<div class="row row3"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div>
</div>
<div id="back" class="page back">
<div class="row row1"><span class="green"></span><span class="green"></span><span class="green"></span></div>
<div class="row row2"><span class="green"></span><span class="green"></span><span class="green"></span></div>
<div class="row row3"><span class="green"></span><span class="green"></span><span class="green"></span></div>
</div>
<div id="left" class="page left">
<div class="row row1"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
<div class="row row2"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
<div class="row row3"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
</div>
<div id="right" class="page right">
<div class="row row1"><span class="red"></span><span class="red"></span><span class="red"></span></div>
<div class="row row2"><span class="red"></span><span class="red"></span><span class="red"></span></div>
<div class="row row3"><span class="red"></span><span class="red"></span><span class="red"></span></div>
</div>
</div>
</div>
最新文章
- 用Log Parser Studio分析IIS日志
- jQ控制前端输入用户为空是的提醒
- 单例模式（oc）
- BZOJ4230: 倒计时
- PHP正则表达式及实例
- jQuery 中 on 方法-----给未来元素添加事件
- ZOJ 3903 Ant(公式推导)
- k-means均值聚类算法（转）
- 开心菜鸟系列－－－－函数作用域（javascript入门篇）
- EF Core 使用编译查询提高性能
- Java语言程序设计-助教篇
- django mongodb配置
- 011_Python中单线程、多线程和多进程的效率对比实验
- window无法启动mongodb服务：系统找不到指定的文件错误的解决方法
- 打jar包
- 修改socket缓冲区大小
- @getMapping和@postMapping，@RestController
- hdu 3697 10 福州 现场 H - Selecting courses 贪心 难度:0
- C++实现大正整数及其相关运算(长期更新)
- 堆优化Dijkstra计算最短路+路径计数