效果图

主要用到的3D属性

1、保留子元素的3d属性：transform-style:preserve-3d;

2、2D变形属性：

　　①transform:translate()平移，分X轴，Y轴，Z轴3个方向；单位是像素

　　②transform:rotate()旋转，分X轴，Y轴，Z轴3个方向；单位是deg角度

　　③transform:scale()缩放，0~1表示缩小倍数，1~正无穷表示放大倍数（本案例没有用到）

　　④transform:skew()斜切，两个参数：水平斜切，垂直斜切；单位deg角度（本案例没有用到）

　　注意：同一个元素多个变形属性用空格隔开，不能写多个transform；

3D立方体：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 300px;

            height: 300px;

            border: 1px solid #000;

            margin: 100px auto;

            position: relative;

            transform-style: preserve-3d;

            transform: rotateX(10deg) rotateY(30deg);

            animation: move 2s ease 0s infinite;

        }

        .box div {

            position: absolute;

            top: 0;

            left: 0;

            opacity: .5;

        }

        .front {

            width: 300px;

            height: 300px;

            background-color: red;

            transform:translateZ(150px);

        }

        .back {

            width: 300px;

            height: 300px;

            background-color: blue;

            transform: translateZ(-150px);

        }

        .left {

            width: 300px;

            height: 300px;

            background-color: orange;

            transform: rotateY(90deg) translateZ(-150px);

        }

         .right {

            width: 300px;

            height: 300px;

            background-color: green;

            transform: rotateY(90deg) translateZ(150px);

        }

        .top {

            width: 300px;

            height: 300px;

            background-color: lightblue;

            transform: rotateX(90deg) translateZ(150px);

        }

        .bottom {

            width: 300px;

            height: 300px;

            background-color: purple;

            transform: rotateX(90deg) translateZ(-150px);

        }

        @keyframes move {

            from{

                transform: rotateX(10deg) rotateY(30deg);

            }

            to{

                transform: rotateX(370deg) rotateY(390deg);

            }

        }

     </style>

</head>

<body>

    <div class="box">

        <div class="front"></div>

        <div class="back"></div>

        <div class="left"></div>

        <div class="right"></div>

        <div class="top"></div>

        <div class="bottom"></div>

    </div>

</body>

</html>

3D立方体的更多相关文章

  1. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  2. css3-实现3D立方体旋转

    核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...

  3. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  4. js拖拽3D立方体旋转

    这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...

  5. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  6. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  7. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

  8. 仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

    先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默 ...

  9. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

随机推荐

  1. Vs2013 & .net framework 4.5.1 预览介绍

    微软发布了vs2013 preview 和fw4.5.1 下面简单介绍一下与大家共享 Developer productivity X64 edit and continue 在2013里面 可以在x ...

  2. MyEclipse打开JSP文件报"Failed to create the part's controls"解决方法汇总

    有时候,打开别人的开发环境中导过来的项目的JSP文件,会出现“Failed to create the part's controls”的错误! 解决的方法有: 方法1:关闭myeclipse的jsp ...

  3. SQL Server ->> 高可用与灾难恢复（HADR）技术 -- AlwaysOn可用性组（理论篇）

    因为篇幅原因,AlwaysOn可用性组被拆成了两部分:理论部分和实战部分.而实战部分又被拆成了准备工作和AlwaysOn可用性组搭建. 三篇文章各自的链接: SQL Server ->> ...

  4. lua的面向对象实现

    百度搜索一下,给出出的解决方案和学习帖子很多,可是我还是有很多的问题! (1)什么是面向对象? (2)lua中怎么实现面向对象? (3)什么样的实现既简单又能完成我的功能? (4)一定要按照c++的方 ...

  5. Word 启动模板文件

    运行窗口输入:%appdata%\microsoft\templates

  6. ssh_exchange_identification: Connection closed by remote host

    用服务器内网ip连接同子网服务器的时候显示ssh_exchange_identification: Connection closed by remote host 防火墙什么都关闭了,还是显示这个问 ...

  7. ue-edit设置显示函数列表

    UltraEdit的函数列表竟然不显示函数,那这功能要它何用,应该如何才能让函数显示出来呢? 公司编程基本上都在UltraEdit中进行,俺刚来公司还不熟悉,今天装了个UltraEdit,可是看着别人 ...

  8. SDR窃听-监听空中的无线电

    A GSM HACK的另一种方法:RTL-SDR 0x00 背景 文中所有内容仅供学习研究,请勿用于非法用途.在绝大多数国家里非法窃听都是严重非法行为. 本文内容只讨论GSM数据的截获,不讨论破解. ...

  9. Dom4j的一个小例子,用于解析xml文件的元素获取方式

    import java.io.File; import java.io.IOException; import javax.xml.parsers.ParserConfigurationExcepti ...

  10. define常量

    看手册说define定义的常量只允许: 仅允许标量和 null.标量的类型是 integer, float,string 或者 boolean. 也能够定义常量值的类型为 resource ,但并不推 ...