css3实现立体魔方效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3魔方</title>
<style>
div.box {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 5s linear infinite alternate;
} div.box:hover{
animation-play-state: paused;
} @keyframes rotate{
0%{
transform: rotateX(0) rotateY(0) rotateZ(0);
} 50%{
transform: rotateX(30deg) rotateY(34deg) rotateZ(50deg);
} 100%{
transform: rotateX(60deg) rotateY(90deg) rotateZ(135deg);
}
} div.face {
width: 300px;
height: 300px;
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
} div.item {
width: 90px;
height: 90px;
border-radius: 10px;
text-align: center;
line-height: 90px;
} .top .item {
background: red;
} .top {
transform: rotateX(-90deg) translateZ(150px);
} .bottom .item {
background: skyblue;
} .bottom {
transform: rotateX(90deg) translateZ(150px);
} .left .item {
background: chocolate;
} .left {
transform: rotateY(90deg) translateZ(150px);
} .right .item {
background: blue;
} .right {
transform: rotateY(-90deg) translateZ(150px);
} .front .item {
background: deepskyblue;
} .front {
transform: translateZ(150px)
} .back .item {
background: yellowgreen;
} .back {
transform: translateZ(-150px) rotateY(-180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="face front">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="face back">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div> </div>
<div class="face left">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="face right">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="face top">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="face bottom">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</body>
</html>
css3实现立体魔方效果的更多相关文章
- CSS3 3D环境实现立体 魔方效果代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3文字立体效果
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 使用CSS3制作立体效果的导航菜单
效果如下: 也可以点击网址查看效果:http://keleyi.com/keleyi/phtml/html5/12.htm 请使用支持CSS3的浏览器访问本页面,获得更好效果. 源代码: <st ...
- CSS3制作立体导航
<ul class="nav"> <li><a href="">首页</a></li> <li ...
- CSS3,transform3D立体可拖拽正方体实现原理
---恢复内容开始--- 今天咱们来说一下,CSS中的3D效果 .如果你把transform真的掌握的和纯熟的话,就可以直接通过CSS做出很多很炫酷的效果,甚至.轮播图和选项卡都可以通过CSS来做,咱 ...
- CSS3 3D立体柜子实现
1. [图片] 20140811233657.jpg 2. [图片] 120140811233846.jpg 3. [代码][CSS]代码 body { background-color: ...
- css3立体旋转菜单
css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...
- 14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
- 9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...
随机推荐
- MyBatis 中 @Param 注解的四种使用场景
https://juejin.im/post/6844903894997270536 第一种:方法有多个参数,需要 @Param 注解 第二种:方法参数要取别名,需要 @Param 注解 第三种:XM ...
- 主动关闭 tcp_timewait_state_process 处理
正常情况下主动关闭连接的一端在连接正常终止后,会进入TIME_WAIT状态,存在这个状态有以下两个原因(参考<Unix网络编程>): 1.保证TCP连接关闭的可靠性.如果最终发送 ...
- mysql中数据类型DECIMAL(M,D)的说明
本文转载自Boblim的文章http://www.cnblogs.com/fnlingnzb-learner/p/8108119.html 在MySQL数据类型中,例如INT,FLOAT,DOUBLE ...
- uboot分析——预备知识
1. 刷机 刷机是使用fastboot,所以板子首先要已经能运行uboot,若ROM没有uboot,则使用sd卡或usb启动uboot. 板子进入uboot后,输入fastboot命令,进入fastb ...
- HashMap 链表插入方式 → 头插为何改成尾插 ?
开心一刻 一天,楼主在路上碰到了一个很久没见的朋友,找了个餐馆,坐下聊了起来 楼主:在哪上班了 ? 朋友:火葬场啊 楼主:在那上班,一个月多少钱啊 ? 朋友:两万多啊 楼主(不可思议):多少 ? 朋友 ...
- 查询osd上的pg数
本文中的命令的第一版来源于国外的一个博客,后面的版本为我自己修改的版本 查询的命令如下: ceph pg dump | awk ' /^pg_stat/ { col=1; while($col!=&q ...
- asp.net core 使用 TestServer 来做集成测试
asp.net core 使用 TestServer 来做集成测试 Intro 之前我的项目里的集成测试是随机一个端口,每次都真实的启动一个 WebServer,之前也有看到过微软文档上 TestSe ...
- PL/SQL Developer 13注册码（亲测可用）
product code: 4vkjwhfeh3ufnqnmpr9brvcuyujrx3n3le serial Number: 226959 password: xs374ca
- 分布式监控系统之Zabbix网络发现
前文我们了解了zabbix的宏,自定义item和模板的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14013331.html:今天我们来了解下zab ...
- webug第八关:CSRF
第八关:CSRF 用tom用户登陆,进入更改密码界面 用burp构造csrf页面 将构造好的页面放在服务器上,然后点击, admin的密码被更改