更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢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. [转]反向ajax项目

      ASP.NET WebSocket & Comet Ajax Library (Reverse Ajax - Server Push) 项目链接:http://pokein.codeple ...

  2. 神经网络（python源代码）

    神经网络的逻辑应该都是熟知的了,在这里想说明一下交叉验证 交叉验证方法: 看图大概就能理解了,大致就是先将数据集分成K份,对这K份中每一份都取不一样的比例数据进行训练和测试.得出K个误差,将这K个误差 ...

  3. php emoji处理微信表情

    使用 https://github.com/iamcal/php-emoji 添加下面的函数到代码中 function utf8_bytes($cp){ if ($cp > 0x10000){ ...

  4. iOS8 定位补充

    iOS 8定位补充 iOS 8定位需要修改2个地方 1.info.plist文件中添加NSLocationAlwaysUsageDescription:描述信息 从iOS 8开始,用户定位分两种情况 ...

  5. 04 Apache Solr: 目录结构

         通过前面的介绍,我们已经能够看到管理员界面并对Solr形成了一个感性的认识.本篇将在物理上深入了解Solr的安装目录结构和Solr示例的主目录结构.   安装目录结构 Solr 6.3.0安 ...

  6. Splinter学习－－初探3，两种方式登录QQ邮箱

    目前,qq邮箱的登录方式有: 1.利用账号.密码登录 2.快捷登录,前提是你本地已有qq账号登录中 和前面一样,还是先到qq邮箱登录首页,审查页面元素,找到我们进行登录操作所相关的链接.按钮或是输入框 ...

  7. 如何搭建一个WAMP环境

    最近的一些比赛需要用到PHP,所以急需配置一个PHP的环境,所以分享出来我的经历  一.使用wampserver 这是一个集成软件包,可以一键配置Apache+Mysql+PHP,还具有简单的图形界面 ...

  8. Android框架之AndroidAnnotations详细讲解

    一: (1)一个activity如过使用AndroidAnnotions注入时, 那么它在 AndroidManifest.xml注册时,应该加入_ 比如: MainActivity的注册时 < ...

  9. C++中下标操作注意事项

    C++中,下标操作不添加元素,对于任何使用下标操作的情况,如string类型.vector类型等等,必须是已存在的元素才能用下标操作符进行索引.如果类型为空,通过 下标操作进行赋值时,不会添加任何元素 ...

  10. MSMQ（Microsoft Message Queue）

    http://www.cnblogs.com/sk-net/archive/2011/11/25/2232341.html 利用 MSMQ(Microsoft Message Queue),应用程序开 ...