更新下：好久没用博客园了，今天为了点赞别人的文章又登录了，谢谢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. Light OJ 1028 - Trailing Zeroes (I) （数学-因子个数）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1028 题目大意:n除了1有多少个因子(包括他本身) 解题思路:对于n的每个因子 ...

  2. Android资源文件简介

    Android资源文件简介 1. Android应用资源的作用 (1) Android项目中文件分类 在Android工程中, 文件主要分为下面几类 : 界面布局文件, Java src源文件, 资源 ...

  3. 【待整理】Linux故障排查

    ethtool -i eth0dmidecode -i eth3more /var/log/meclogmore /etc/issue

  4. PHP操作Mongodb之高级查询篇

    本文主要讲解PHP中Mongodb的除了增删改查的一些其他操作. 在PHP操作Mongodb之增删改查篇中我们介绍了PHP中Mongodb的增加.删除.修改及查询数据的操作.本文主要是将查询时用到的高 ...

  5. CentOS 6.5 安装Oracle 11G R2问题列表

    1. 文章中写vi/etc/profile #这个很重要 if [ $USER ="oracle" ]; then     if [ $SHELL="/bin/ksh&q ...

  6. iOS10字体

    iOS10字体随着手机系统的字体改变,当我们手机系统字体改变以后,我们的app的lable也会跟着一起变化: 同样的6sp,在iOS9上面运行字体显示是没问题的,当我的手机更新了iOS10以后,有的界 ...

  7. eyegaze

    1. eye_gaze https://github.com/iitmcvg/eye-gaze 2.deepgaze https://github.com/mpatacchiola/deepgaze ...

  8. 清空StringBuilder的三种方法及效率

    清空StringBuilder的三种方法及效率 大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilde ...

  9. Windows Desktop 调用 WinRT api

    <Reference Include="Windows"> <HintPath>..\..\..\..\..\..\Program Files (x86)\ ...

  10. sql server 2000数据库 最近经常出现某进程一直占用资源，阻塞？死锁？

    OA的数据库最近多次出现某进程一直占用资源,导致其他进程无法执行.使用sp_who2 和 sql server profiler跟踪查询,发现有以下几个语句常常占用资源: 1.declare @P1 ...