用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. windows phone 8.1 让项目开启蓝牙genericAttributeProfile

    1.打开项目里面的  Package.appxmanifest 文件 找到<Capabilities>节点,添加代码如下,其中 serviceId:6006 可以自己修改值 <m2: ...

  2. Mysql本地安装多实例后启动遇到的问题

    一.本文紧接上一篇[win10-MySql免安装版-安装/多实例] 在上一篇文章里,安装Mysql解压版后,复制多份到本地,实现了多实例的安装 在后续启动其它实例的时候会遇到一些问题,以下就是自己遇到 ...

  3. PostgreSQL 使用 LDAP 认证方式

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL杂记页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackgao@gmail. ...

  4. 优步司机如何联系客服?uber客服渠道，Uber优步司机客服渠道

    预约客服导航 为了更好的快速.有效地解决您的疑问,Uber优步从今日起开通了在线客服平台.如果您通过司机服务/常见问题没有找到您需要的答案,您可以通过点击下方的“进入在线客服平台”与我们的工作人员在线 ...

  5. 2801 LOL-盖伦的蹲草计划

    2801 LOL-盖伦的蹲草计划 时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold     题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫 ...

  6. GlusterFS学习之路（二）GlusterFS部署及卷类型使用

    一.环境说明 主机名 IP地址 角色 磁盘 gluster-node1 192.168.56.11 Server.Client /dev/sdb./dev/sdc./dev/sdd gluster-n ...

  7. Windows 实例搭建的 FTP 在外网无法连接和访问

    外网无法连接和访问 Windows 实例搭建的 FTP,这种情况可能是由于以下两种原因导致的: 安全组拦截外网访问 防火墙拦截 FTP 进程 安全组拦截外网访问 这种情况下,可以尝试新建一条入方向的安 ...

  8. NUnit基本使用方法

    通常的单元测试框架都以他们支持的语言的开头字母加上Unit作为名字,他们统称为xUnit框架.C++的叫做CppUnit,Java的叫做JUnit,.Net的叫做NUnit.当然不是所有的都这么命名, ...

  9. i3wm随笔 1

    快捷键 mod+0 退出 mod+v 垂直分割 mod+h 水平风格

  10. LeetCode--147.对链表进行插入排序

    题目描述: 插入排序的动画演示如上.从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法 ...