用css3写3D立方体用到的属性不多，就那么几个：perspective，transform-style，以及transform。
　　目前来说能完美支持3D的浏览器有chrome、safari，火狐也支持。所以本文的css3代码都只加了webkit前缀，因为产生3D的关键属性perspective其他浏览器都不支持，所以其他浏览器是应该是看不了3D的，所以看本文的例子请用chrome或者safari来看哦。
　　

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CSS鼠标移入效果</title>

    <style>

    *{margin: 0px;padding: 0px;}

    body{background: #222;}

    div.wrap{

        width: 200px;

        perspective: 1000px;/*景深*/

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translateX(-50%) translateY(-50%);/*移动*/

    }

    .cube{

        width: 200px;

        height:200px;

        position: relative;

        transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/

        transform: rotateX(-50deg) rotateY(50deg) rotateZ(0deg);

        animation: move 8s infinite linear;

    }

    .cube>div{

        width: 100%;

        height: 100%;

        background: #000;

        position: absolute;

        box-shadow: 0 0 30px currentColor;

    }

    .cube:hover div{

        background: currentColor;

        box-shadow: 0 0 60px currentColor;

    }

    .cube .out_front{

        color: red;

        transform: translateZ(100px);

    }

    .cube .out_back{

        color: orange;

        transform: translateZ(-100px);

    }

    .cube .out_left{

        color: blue;

        transform: translateX(-100px) rotateY(-90deg);

    }

    .cube .out_right{

        color: green;

        transform: translateX(100px) rotateY(90deg);

    }

    .cube .out_top{

        color: aqua;

        transform: translateY(-100px) rotateX(-90deg);

    }

    .cube .out_bottom{

        color: purple;

        transform: translateY(100px) rotateX(90deg);

    }

    /*帧动画*/

    @keyframes move{

    0%{

        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;

    }

    100%{

        transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);

    }

}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="cube">

            <div class="out_front"></div>

            <div class="out_back"></div>

            <div class="out_left"></div>

            <div class="out_right"></div>

            <div class="out_top"></div>

            <div class="out_bottom"></div>

        </div>

    </div>

</body>

</html>

用CSS实现3D 滚动的立方体的更多相关文章

  1. 简单聊聊CSS中的3D技术之“立方体”

    简单聊聊CSS中的3D技术之“立方体” 大家好,我是今天的男一号,我叫小博主. 今天来聊一下我在前端“逆战班”学习中遇到的颇为有趣的3D知识.前端学习3周,见识稀疏,在下面的分享中如有不对的地方请大家 ...

  2. html + css 01: 3d立方体

    html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...

  3. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  4. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  5. 译-使用Scroll Snapping实现CSS控制页面滚动

    特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...

  6. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  7. 用css实现3D立方体旋转特效

    先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...

  8. css实现3D立方体旋转特效

    先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...

  9. 纯CSS绘制3D立方体

    本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...

随机推荐

  1. JDK1.7的HashMap的put(key, value)源码剖析

    目录 HashMap的put操作源码解析 1.官方文档 2.put(key, value) 3.完结 HashMap的put操作源码解析 1.官方文档 1.1.继承结构 java.lang.Objec ...

  2. js的视频和音频采集

    js的视频和音频采集 今天要写的,不是大家平时会用到的东西.因为兼容性实在不行,只是为了说明下前端原来还能干这些事. 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来,再为所欲为的么.或者说 ...

  3. Airflow使用入门指南

    Airflow能做什么 关注公众号, 查看更多 http://mp.weixin.qq.com/s/xPjXMc_6ssHt16J07BC7jA Airflow是一个工作流分配管理系统,通过有向非循环 ...

  4. hdu1042 N!(大数求阶乘)

    N! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total Submi ...

  5. 使用GitLab创建项目

  6. java学习笔记-01.对象入门

    1.面向对象编程简称是OOP. 2.继承是通过 extends关键字实现的,接口是通过implements关键字实现的. 3.public:意味着后续的定义任何人均可使用. private:意味着除了 ...

  7. springboot集成jpa,在postgresql数据库中创建主键自增表

    依赖文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...

  8. Halcon算子解释

    Halcon算子解释大全 Halcon/Visionpro视频教程和资料,请访问 重码网,网址: http://www.211code.com Chapter 1 :Classification 1. ...

  9. 如何选择合适的Qt5版本？

    注意:这里讨论的是在不编译Qt源码的情况下,推荐下载的官方编译版本. 支持XP SP3以及之后的Windows版本:推荐 Qt5.6 或 Qt5.9,这两个版本是LTS版本(即长期支持版本),Bug较 ...

  10. 阿里与ShopRunner达成协议 联手在国内推出服务

    阿里巴巴集团与美国在线零售商 ShopRunner 达成协议,将帮助后者在中国大陆销售商品和履行订单交付产品. ShopRunner 首席战略官菲奥娜·迪亚斯(Fiona Dias)周三接受媒体采访时 ...