用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. WPF MVVM从入门到精通1：MVVM模式简介

    原文:WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 W ...

  2. 【转载】混编ObjectiveC++

    原文:混编ObjectiveC++ 最近有点炒冷饭的嫌疑,不过确实以前没有Git Or Blog的习惯,所以很多工作上的技术分享就存留在了电脑的文档里,现在还是想重新整理一下,再分享出来. 混编C++ ...

  3. GDAL中通过GDALDriver类的Create函数实现图像的保存

    GDAL中除了读取各种类型的图像外,也可以实现对各种图像的保存操作,具体实现测试代码如下: int test_gadl_GDALDataset_write() { const char* image_ ...

  4. 【JUC源码解析】ThreadPoolExecutor

    简介 ThreadPoolExecutor,线程池的基石. 概述 线程池,除了用HashSet承载一组线程做任务以外,还用BlockingQueue承载一组任务.corePoolSize和maximu ...

  5. 【JUC源码解析】PriorityBlockingQueue

    简介 基于数据结构堆实现的线程安全的无界队列,这个堆的内存结构是数组,结合了数组和二叉树的特点. 堆 以下内容参考<编程珠玑>和<算法导论>有关堆的章节. 数据结构 堆是用来表 ...

  6. Redash二次开发-开发环境搭建

    环境:win7+pycharm 2018.2 +redash 1.安装pycharm并如何正常使用,找度娘. 2.配置pycharm vcs,设置github用户,从github新建redash项目 ...

  7. 三、利用EnterpriseFrameWork快速开发Winform系统（C/S）

    EnterpriseFrameWork框架实例源代码下载: 实例下载 上一章讲解了开发Web系统的详细步骤,以书籍的管理作实例实现对书籍的增.删.改.查功能,本章接着上面的实例继续补充用Winform ...

  8. TPO 02 - Desert Formation

    TPO 02 - Desert Formation NOTE: 主要意思(大概就是主谓宾)用粗体标出:重要的其它用斜体: []中的是大致意思,可能与原文有关也可能无关,但不会离题 目的为训练句子/段落 ...

  9. Unity Lighting - High Dynamic Range (HDR) 高动态范围（五）

      High Dynamic Range (HDR) 高动态范围 As well as Color Space, the ‘dynamic range’ of your camera needs to ...

  10. Python学习之web框架 Flask

    一.通过PIP 安装Flask 1.1 Windows环境安装pip A.首先PIP进入官网(https://pypi.python.org/pypi/pip)下载gz包 B.对gz压缩包进行解压,解 ...