更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢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. 关于C# DataTable 的一些操作

    经常操作DATATABLE  对于一些不需要再通过sql 来重复操作的   可以通过操作datatable来达到同样的效果 方法一: 也是广为人知的一种: YourDataTable.Columns. ...

  2. mysql通过data文件恢复数据库的方式

    1.首先定位mysql的my.ini配置文件,查找datadir的位置 #Path to the database rootdatadir="C:/ProgramData/MySQL/MyS ...

  3. iOS.Performance-trick-presentViewController-is-so-slow-in-didSelectRowAtIndexPath

    presentViewController is so slow in "tableView:didSelectRowAtIndexPath:" Use Case: 在UITabl ...

  4. github中cesium-terrain-builder和cesium-terrain-server使用

    cesium-terrain-builder的使用: 这个是用来把含有高程数据的tif图片切片成.terrain的小文件,是给cesium-terrain-server提供服务的. cesium-te ...

  5. XE3随笔15：从XML中解析

    SuperObject 文件包中还有一个 SuperXmlParser 单元, 可以从 XML 中解析出 ISuperObject. SuperXmlParser 只有三个函数: XMLParseSt ...

  6. UIMenuController 弹出菜单框

    弹出菜单框 UIMenuItem *menuItem1 = [[UIMenuItem alloc] initWithTitle:@"删除" action:@selector(del ...

  7. ue4 模块的构建和加载

    ue4的代码是模块的形式来组织 在源码层面,一个包含*.build.cs的目录就是一个模块 这个目录里的文件在编译后都会被链接在一起,比如一个静态库lib,或者一个动态库dll. 不管是哪种形式,都需 ...

  8. [game]十字链表的AOI算法实现

    AOI主要有九宫格.灯塔和十字链表的算法实现.本文阐述十字链表的实现和尝试. 1. 基本原理 根据二维地图,将其分成x轴和y轴两个链表.如果是三维地图,则还需要维护多一个z轴的链表.将对象的坐标值按照 ...

  9. 大漠绑定测试工具-VB6

    获取更新开始|版本:3.1652版 2016年12月27日|更新内容:1.取消自动更新错误的提示.\n\n友情提示:如网盘失效,请加QQ群(568073679)下载最新版|下载地址:http://ww ...

  10. [13]APUE：KQUEUE / FreeBSD

    [a] 概述 kqueue API 由两个函数(kqueue.kevent).一个辅助宏(EV_SET).一个结构体(struct kevent)构成,可以应用于 socket.FIFO.pipe.a ...