更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢chrome帮我记住了账号密码，下面这个效果之前自己已经实现了，分享个演示地址：https://codepen.io/nooby/pen/vKogZB

　　有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页，当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果，可能正是由于这个效果，让我想到了--可以不可以通过transform来弄个3D的立方体呢？后来慢慢的去做，遇到好多问题，下面把这次小尝试记录下，等到日后有灵感再去弄。。。

　　代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         #main{

             width: 500px;

             height: 500px;

             margin:150px auto;

             position: absolute;

             transform-style: preserve-3d;

             left:40%;

             perspective: 1500px;

         }

         img{

             width:240px;

             height:150px;

             position: absolute;

         }

         img:nth-child(1){

             transform:rotateY(30deg) translateZ(120px);

             -webkit-transform: rotateY(30deg) translateZ(120px);

             -moz-transform: rotateY(30deg) translateZ(120px);

         }

         img:nth-child(2){

             transform:rotateY(120deg) translateZ(120px);

             -webkit-transform: rotateY(120deg) translateZ(120px);

             -moz-transform: rotateY(120deg) translateZ(120px);

         }

         img:nth-child(3){

             transform:rotateY(210deg) translateZ(120px);

             -webkit-transform: rotateY(210deg) translateZ(120px);

             -moz-transform: rotateY(210deg) translateZ(120px);

         }

         img:nth-child(4){

             transform:rotateY(300deg) translateZ(120px);

             -webkit-transform: rotateY(300deg) translateZ(120px);

             -moz-transform: rotateY(300deg) translateZ(120px);

         }

     </style>

     <script>

        // var r=120 / Math.tan(45/ 180 * Math.PI);//计算translate的值

        /*window.onload=function f(){

             var oImg=document.getElementsByTagName("img");

             for(var i=0;i<oImg.length;i++){

                 oImg[i].style.transform=rotateY(0,30+i*90+'deg');

             }

         }*/

     </script>

 </head>

 <body>

 <div id="main">

     <img src="Images/a.jpg">

     <img src="Images/f.jpg">

     <img src="Images/c.jpg">

     <img src="Images/d.jpg">

 </div>

 </body>

 </html>

　　问题1、在chrome浏览器里面和ie浏览器里面的效果不同

　　问题2、不知道怎么加上两个“盖子”

　　问题3、想通过js来控制rotateY()以实现转动变换的效果，发现用普通获取属性的方法获取不了rotateY（）（见注释处）

　　。。。

　　希望知道上面的问题怎么解决的博友们不吝赐教哈，谢谢！

用CSS3的transform来做一个立方体的更多相关文章

  1. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  3. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  4. 好吧，CSS3 3D transform变换，不过如此！——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  6. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  7. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  8. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  9. css3之transform的应用

    一.利用transform实现图片额外显示 效果图如下 初始状态:

随机推荐

  1. call

    -------siwuxie095 call 调用另一个批处理程序或自身程序段,调用完,程序会回到原来 call 的地方继续执行 如果在脚本或批处理文件外使用 call,则不会在命令行起作用 语法 c ...

  2. MINA系列学习-IoAccpetor

    其实在mina的源码中,IoService可以总结成五部分service责任.Processor线程处理.handler处理器.接收器和连接器,分别对应着IoService.IoProcessor.I ...

  3. linux 如何显示一个文件的某几行(中间几行)

    linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...

  4. 关于 Netty Channel 的 Autoread

    Netty 4 的 Channel 多了一个 autoread 参数, 它的用处是在让 channel 在触发某些事件以后(例如 channelActive, channelReadComplete) ...

  5. Div+CSS命名规范

    注意事项:1.命名遵循驼峰式  2.尽量用中文  3.不加中杠和下划线   4.尽量不缩写,除非一看就明白的单词 头:header   标志:logo  友情链接:friendlink    内容:c ...

  6. linux driver编译环境搭建和命令

    首先将ubuntu14.04的内核升级到内核3.18.12. 其次,Ubuntu14.04上驱动编译命令 $ sudo make -C ~/linux-3.18.12/ M=`pwd` modules ...

  7. 关于python的requests库抓取源文件中文乱码的情况

    import requests html=requests.get('http://www.12306.cn/mormhweb/') print html.text 刚开始是这么写的,运行时一直弹出错 ...

  8. java中super的两种用法

    通过用static来定义方法或成员,为我们编程提供了某种便利,从某种程度上可以说它类似于C语言中的全局函数和全局变量.但是,并不是说有了这种便利,你便可以随处使用,如果那样的话,你便需要认真考虑一下自 ...

  9. easyui自定义标签 datagrid edit combobox 手动输入保存不上问题解决办法

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column ...

  10. jquery之右下角消息提示框

    messager.js (function (jQuery) { var window; var obj = new Object(); obj.version = '@1.0'; obj.title ...