CSS 制作3D魔方 爱的魔方给女(男)朋友一个感动
2015-08-24 09:14
846 查看
首先上效果图:
是不是很炫呢!
没有?
好吧!只能发个大招了,来看下动态的效果吧
http://www.meipai.com/media/395929464
效果还算可以吧,相信只要你用心,你会做出更炫的效果。把你们的生活点滴记录在上面,你的他/她肯定会非常感动的。
好了,是不是已经迫及待的想看看到底是怎么实现的了!
下面先附上HTML的代码
是不是感觉也并不难啊。
对啊,其实就是六个DIV组成了魔方的六个面,然后每个魔方上面放了九张图片。
就这样就简单的实现了魔方的简单架构。
是不是对CSS还没有头绪, 来看下面的CSS代码吧,也是很简单的。
对于不了解CSS3中的 transform,animation属性的童鞋估计看着多少还是有点迷糊的,
建议稍微了解下 transform,animation 你就犹如恍然大悟,发现原来做这样一个魔方这么简单啊!
希望你们都能做出更炫酷的效果,给你的他/她一个大大的惊喜。
是不是很炫呢!
没有?
好吧!只能发个大招了,来看下动态的效果吧
http://www.meipai.com/media/395929464
效果还算可以吧,相信只要你用心,你会做出更炫的效果。把你们的生活点滴记录在上面,你的他/她肯定会非常感动的。
好了,是不是已经迫及待的想看看到底是怎么实现的了!
下面先附上HTML的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>爱的魔方</title> <link rel="stylesheet" type="text/css" href="Rubiks_Cube.css"> </head> <body> <div class="main"> <img src="img/bg.jpg" class="bgimg"> <div class="stage"> <div class="cube Ani-rotate"> <div class="one"> <div> <img src="img/1-1.gif"> </div> <div> <img src="img/1-2.gif"> </div> <div> <img src="img/1-3.gif"> </div> <div> <img src="img/1-4.gif"> </div> <div> <img src="img/1-5.gif"> </div> <div> <img src="img/1-6.gif"> </div> <div> <img src="img/1-7.gif"> </div> <div> <img src="img/1-8.gif"> </div> <div> <img src="img/1-9.gif"> </div> </div> <div class="two"> <div> <img src="img/2-1.gif"> </div> <div> <img src="img/2-2.gif"> </div> <div> <img src="img/2-3.gif"> </div> <div> <img src="img/2-4.gif"> </div> <div> <img src="img/2-5.gif"> </div> <div> <img src="img/2-6.gif"> </div> <div> <img src="img/2-7.gif"> </div> <div> <img src="img/2-8.gif"> </div> <div> <img src="img/2-9.gif"> </div> </div> <div class="three"> <div> <img src="img/3-1.gif"> </div> <div> <img src="img/3-2.gif"> </div> <div> <img src="img/3-3.gif"> </div> <div> <img src="img/3-4.gif"> </div> <div> <img src="img/3-5.gif"> </div> <div> <img src="img/3-6.gif"> </div> <div> <img src="img/3-7.gif"> </div> <div> <img src="img/3-8.gif"> </div> <div> <img src="img/3-9.gif"> </div> </div> <div class="four"> <div> <img src="img/4-1.gif"> </div> <div> <img src="img/4-2.gif"> </div> <div> <img src="img/4-3.gif"> </div> <div> <img src="img/4-4.gif"> </div> <div> <img src="img/4-5.gif"> </div> <div> <img src="img/4-6.gif"> </div> <div> <img src="img/4-7.gif"> </div> <div> <img src="img/4-8.gif"> </div> <div> <img src="img/4-9.gif"> </div> </div> <div class="five"> <div> <img src="img/5-1.gif"> </div> <div> <img src="img/5-2.gif"> </div> <div> <img src="img/5-3.gif"> </div> <div> <img src="img/5-4.gif"> </div> <div> <img src="img/5-5.gif"> </div> <div> <img src="img/5-6.gif"> </div> <div> <img src="img/5-7.gif"> </div> <div> <img src="img/5-8.gif"> </div> <div> <img src="img/5-9.gif"> </div> </div> <div class="six"> <div> <img src="img/6-1.gif"> </div> <div> <img src="img/6-2.gif"> </div> <div> <img src="img/6-3.gif"> </div> <div> <img src="img/6-4.gif"> </div> <div> <img src="img/6-5.gif"> </div> <div> <img src="img/6-6.gif"> </div> <div> <img src="img/6-7.gif"> </div> <div> <img src="img/6-8.gif"> </div> <div> <img src="img/6-9.gif"> </div> </div> </div> </div> </div> </body> </html>
是不是感觉也并不难啊。
对啊,其实就是六个DIV组成了魔方的六个面,然后每个魔方上面放了九张图片。
就这样就简单的实现了魔方的简单架构。
是不是对CSS还没有头绪, 来看下面的CSS代码吧,也是很简单的。
/*定义图片大小*/ img { width: 100px; height: 100px; } .main { position: absolute; width: 100%; height: 100%; z-index: -1 } .bgimg { position: fixed; height: 100%; width: 100%; } .stage { width: 300px; height: 300px; margin: 200px auto 0 auto; } .cube div { width: 300px; height: 300px; position: absolute; /*border: 1px solid #00F;*/ /*background-color: rgba(255,200,100,0.5);*/ display: block; border-radius: 5%; } /*通过转换X、Y、Z轴上的角度,实现魔方六个面的位置摆放*/ .cube .one { -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px); -ms-transform: translateZ(150px); transform: translateZ(150px); } .cube .two { -webkit-transform: rotateX(-90deg) translateZ(150px); -moz-transform: rotateX(-90deg) translateZ(150px); -ms-transform: rotateX(-90deg) translateZ(150px); transform: rotateX(-90deg) translateZ(150px); } .cube .three { -webkit-transform: rotateX(90deg) translateZ(150px); -moz-transform: rotateX(90deg) translateZ(150px); -ms-transform: rotateX(90deg) translateZ(150px); transform: rotateX(90deg) translateZ(150px); } .cube .four { -webkit-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px); -moz-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px); -ms-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px); transform: rotateZ(180deg) rotateY(180deg) translateZ(150px); } .cube .five { -webkit-transform: rotateY(-90deg) translateZ(150px); -moz-transform: rotateY(-90deg) translateZ(150px); -ms-transform: rotateY(-90deg) translateZ(150px); transform: rotateY(-90deg) translateZ(150px); } .cube .six { -webkit-transform: rotateY(90deg) translateZ(150px); -moz-transform: rotateY(90deg) translateZ(150px); -ms-transform: rotateY(90deg) translateZ(150px); transform: rotateY(90deg) translateZ(150px); } .one div, .two div, .three div, .four div, .five div, .six div { width: 100px; height: 100px; position: absolute; /*border: 1px solid #000;*/ border-radius: 10%; /*display: inline-block;*/ } /*每张图片位置的确定*/ .cube div div:nth-child(1) {} .cube div div:nth-child(2) { background-image: url(as.jpg); left: 100px; } .cube div div:nth-child(3) { /*background-color: #FF0000;*/ left: 200px; } .cube div div:nth-child(4) { /*background-color: #FF6431;*/ top: 100px; } .cube div div:nth-child(5) { /*background-color: #15FF31;*/ top: 100px; left: 100px; } .cube div div:nth-child(6) { /*background-color: #1564FF;*/ top: 100px; left: 200px; } .cube div div:nth-child(7) { /*background-color: #15F4F5;*/ top: 200px; } .cube div div:nth-child(8) { /*background-color: #F56F89;*/ top: 200px; left: 100px; } .cube div div:nth-child(9) { /*background-color: #1F644F;*/ top: 200px; left: 200px; } /*最后最关键的旋转动画效果来了, 感觉看着有些费劲建议看下CSS3的 transform,animation属性 */ .Ani-rotate { -webkit-transform-style: preserve-3d; /*开启3D视图,这样才能看到3D的效果*/ -webkit-animation: rotate 30s infinite; /*设置动画,动画的名称,动画执行时间,动画执行次数*/ /*margin: 80px;*/ /*-webkit-perspective:2000px;*/ /*-webkit-perspective-origin: -133% 75%;;*/ -webkit-transform-origin: 150px 150px 0px; /*旋转中心点,分别为 X、Y、Z轴上的位置*/ -moz-transform-style: preserve-3d; /*下面是为了兼容更多浏览器*/ -moz-animation: rotate 30s infinite; -moz-transform-origin: 150px 150px 0px; -ms-transform-style: preserve-3d; -ms-animation: rotate 30s infinite; -ms-transform-origin: 150px 150px 0px; animation: rotate 30s infinite; transform-style: preserve-3d; transform-origin: 150px 150px 0px; } /*下面是动画的定义,设置不同时间动画的不同状态 rotateX、rotateY、rotateZ 为设置在X、Y、Z轴上旋转的角度 "-"为逆时针旋转 */ @-webkit-keyframes rotate { from, to {} 15% { -webkit-transform: rotateY(-135deg); } 30% { -webkit-transform: rotateY(-90deg)rotateZ(135deg); } 45% { -webkit-transform: rotateY(225deg)rotateZ(135deg); } 60% { -webkit-transform: rotateY(135deg)rotateX(135deg); } 75% { -webkit-transform: rotateX(135deg)rotateY(225deg); } 90% { -webkit-transform: rotateX(-135deg); } } @-moz-keyframes rotate { from, to {} 15% { -moz-transform: rotateY(-135deg); } 30% { -moz-transform: rotateY(-90deg)rotateZ(135deg); } 45% { -moz-transform: rotateY(225deg)rotateZ(135deg); } 60% { -moz-transform: rotateY(135deg)rotateX(135deg); } 75% { -moz-transform: rotateX(135deg)rotateY(225deg); } 90% { -moz-transform: rotateX(-135deg); } } @-ms-keyframes rotate { from, to {} 15% { -ms-transform: rotateY(-135deg); } 30% { -ms-transform: rotateY(-90deg)rotateZ(135deg); } 45% { -ms-transform: rotateY(225deg)rotateZ(135deg); } 60% { -ms-transform: rotateY(135deg)rotateX(135deg); } 75% { -ms-transform: rotateX(135deg)rotateY(225deg); } 90% { -ms-transform: rotateX(-135deg); } } @keyframes rotate { from, to {} 15% { transform: rotateY(-135deg); } 30% { transform: rotateY(-90deg)rotateZ(135deg); } 45% { transform: rotateY(225deg)rotateZ(135deg); } 60% { transform: rotateY(135deg)rotateX(135deg); } 75% { transform: rotateX(135deg)rotateY(225deg); } 90% { transform: rotateX(-135deg); } }
对于不了解CSS3中的 transform,animation属性的童鞋估计看着多少还是有点迷糊的,
建议稍微了解下 transform,animation 你就犹如恍然大悟,发现原来做这样一个魔方这么简单啊!
希望你们都能做出更炫酷的效果,给你的他/她一个大大的惊喜。
相关文章推荐
- iOS中修改状态栏StatusBar状态和样式的几种方法
- css属性image-redering详解
- css属性image-redering详解
- css属性image-redering详解
- QT 按钮(4种样式)
- Gulp帮你自动搞定coffee和scss的compile
- CSS和JS标签style属性对照表
- CSS相关图书推荐
- CSS/CSS3常用样式小结
- CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。
- css属性image-redering详解
- css盒子模型
- web前端:css
- 纯CSS制作圆角矩形框知识总结
- CSS初识
- css选择器
- 慢慢说CSS第一天
- css浮动
- css中定位position应用详解
- CSS position属性