更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢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. leveldb 学习笔记之log结构与存取流程

    log文件的格式 log文件每一条记录由四个部分组成: CheckSum,即CRC验证码,占4个字节 记录长度,即数据部分的长度,2个字节 类型,这条记录的类型,后续讲解,1个字节 数据,就是这条记录 ...

  2. 类的序列化和反序列化（ObjectOutputStream和ObjectInputStream）

    1.需要序列化的类 import java.io.Serializable; /** * 必须继承 Serializable 接口才能实现序列化 */ public class Employee im ...

  3. linux之find命令详解

    linux之find命令详解 查找文件find ./ -type f查找目录find ./ -type d查找名字为test的文件或目录find ./ -name test查找名字符合正则表达式的文件 ...

  4. 安装运行okvis

    1. 安装依赖项 sudo apt-get install cmake   //cmake sudo apt-get install libgoogle-glog-dev  // glog是Googl ...

  5. npm 加速方案

    使用npm install 包,是见比较头疼的事情,比较慢,很难等,经过探索,还是发现有办法加速的,方法有两个,让我一一道来: 1. 在npm 后添加参数 --registry=... 指定镜像源地址 ...

  6. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  7. SQLMAP 中$与#的区别

    在sql配置中比如in(#rewr#) 与in ($rewr$) 在Ibatis中我们使用SqlMap进行Sql查询时需要引用参数,在参数引用中遇到的符号#和$之间的区分为,#可以进行与编译,进行类型 ...

  8. Linux进程管理、任务管理

    查看进程 Linux中的进程可以使用ps.pstree命令查看. 一般使用 ps aux (注意,没有短划线-:虽然加上不影响执行,只是会提示),还可以使用 ps -le,都是查看所有进程,区别在于显 ...

  9. Eclipse导入Maven项目,使用server 启动报错，class 找不到，

    问题发现: 1.导入maven 项目后,用server 启动,选择项中没有这个项目 解决: 说明server 没有把该项目当成web项目,需要设置 项目右键 properties  ---- proj ...

  10. the fourth class

    6 居右 label加宽度,text-align:right 7 list copy: list1.concat(list1) 8 灵活运用addHandle,addEventListener 给in ...