用CSS3写一个旋转魔方相册

这个旋转的魔方相册，是使用transform的translate属性写出来。一共是一大一小两个正方形，废话不多说，看代码
HTML代码

 <!--最简单的代码呈现最炫丽的页面，请忽略我的类名，懒得起名字--><div id="mf"><div class="mf_d1 d1_top"></div><div class="mf_d1 d1_bottom"></div><div class="mf_d1 d1_left"></div><div class="mf_d1 d1_right"></div><div class="mf_d1 d1_qian"></div><div class="mf_d1 d1_hou"></div><div class="mf_d2" id="d2_top"></div><div class="mf_d2" id="d2_bottom"></div><div class="mf_d2" id="d2_left"></div><div class="mf_d2" id="d2_right"></div><div class="mf_d2" id="d2_qian"></div><div class="mf_d2" id="d2_hou"></div></div>

css代码

 /*请自动忽略我的代码规范，这早期时候写的demo*/#mf{width:200px;height:200px;margin:200px auto;position:relative;transform-style:preserve-3d;perspective:100000px;animation:xuanzhuan 3s linear infinite;margin:20% auto;}.mf_d1{width:140px;height:140px;position:absolute;top:30px;left:30px;}.mf_d2{width:200px;height:200px;transition:all 1s linear;position:absolute;}/*这个是里面的小正方形*/.d1_top{/*写颜色的*/background:red;/*加图片的*/background-image:  url(./) no-repeat center center;background-size: 100%;/*加图片的*/transform:translateY(-70px) rotateX(90deg);}.d1_bottom{background:blue;transform:translateY(70px) rotateX(90deg);}.d1_left{background:yellow;transform:translateX(-70px) rotateY(90deg);    }.d1_right{background:pink;transform:translateX(70px) rotateY(90deg);   }.d1_qian{background:green;transform:translateZ(-70px); }.d1_hou{background:#000;transform:translateZ(70px);}/*这个是最外层的大正方形*/#d2_top{background:red;transform:translateY(-100px) rotateX(90deg);opacity:0.5;}#d2_bottom{background:blue;transform:translateY(100px) rotateX(90deg);opacity:0.5;}#d2_left{background:yellow;transform:translateX(-100px) rotateY(90deg);opacity:0.5;}#d2_right{background:pink;transform:translateX(100px) rotateY(-90deg);opacity:0.5;}#d2_qian{background:green;transform:translateZ(-100px);   opacity:0.5;}#d2_hou{background:#000;transform:translateZ(100px);opacity:0.5;}/*旋转动画效果*/@keyframes xuanzhuan{0%{transform:rotateY(0deg) rotateX(50deg) rotateZ(0deg);}100%{transform:rotateY(360deg) rotateX(50deg) rotateZ(0deg);}}/*添加移入移出事件*/div#mf:hover #d2_top{transform:translateY(-240px) rotateX(90deg) scale(1.8);}#mf:hover #d2_bottom{transform:translateY(240px) rotateX(90deg) scale(1.8);}#mf:hover #d2_left{transform:translateX(-240px) rotateY(90deg) scale(1.8);}#mf:hover #d2_right{transform:translateX(240px) rotateY(-90deg) scale(1.8);}#mf:hover #d2_qian{transform:translateZ(-240px) scale(1.8);}#mf:hover #d2_hou{transform:translateZ(240px) scale(1.8);}

下图就是页面上的是视觉了，可以根据需要把背景色替换成图片

用CSS3写一个旋转魔方相册相关推荐

用CSS3写一个旋转轮播图
用CSS3写一个旋转轮播图今天用css3写一个不一样的轮播图3D效果. 先看下最后效果吧 1.旋转轮播图结构制作 // html <body><section><div ...
[废弃]想写一个玩魔方的游戏
有一个idea, 想写一个玩魔方的游戏. P.S: 不过,根据本人的执行力,不知道啥时候可以写出来.盖个戳先吧. 注:想了一下,觉得不好玩.废弃之. 转载于:https://www.cnblogs.c ...
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
css旋转按钮制作,css3 旋转按钮使用CSS3创建一个旋转可变色按钮
想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用css3创建一个旋转,旋转,可变色按钮. 这是一个演示旋转的css3按钮.让我们先从html: 复制代码代码如下: ...
CSS3做一个3D展示相册
先来康康效果 (录不好,就只能是图片了) 原作者是油管上的Online Tutorials 现在就来实现它 1.准备知识 transform-style: preserve-3d;对3D变换有空间概念 ...
用html+css3写一个小丸子的头像
启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了. <!DOCTYPE html> ...
如何用css3做一个旋转的魔方
代码: 效果图
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...

用CSS3写一个旋转魔方相册

用CSS3写一个旋转魔方相册相关推荐

最新文章

热门文章