用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设置ListBoxItem失去焦点时的背景色

    <!--全局ListBoxItem--> <Style TargetType="ListBoxItem"> <Style.Resources> ...

  2. day 14 元组

    1. 使用场景? # 列表list 数据类型相同, #rwx文件 100个人的名字, # 用字典 dict ['dɪkt] 很多信息描述1个人, # tuple [ˈtʌpəl] #只读文件 不能修改 ...

  3. UTC时间转为正常日期

    SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'", Locale.US);SimpleDa ...

  4. TPO-18 C2 Possible participation in a sociology project

    TPO-18 C2 Possible participation in a sociology project 第 1 段 1.listen to a conversation between a s ...

  5. Siki_Unity_2-3_UGUI_Unity4.6 UI Beta版本入门学习（未学）

    Unity 2-3 UGUI Unity4.6 UI Beta版本入门学习(未学)

  6. CSP201604-2:俄罗斯方块

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  7. spark读取外部配置文件的方法

    spark读取外部配置文件的方法 spark-submit  --files /tmp/fileName /tmp/test.jar 使用spark提交时使用--files参数,spark会将将本地的 ...

  8. 技本功丨请带上纸笔刷着看：解读MySQL执行计划的type列和extra列

    本萌最近被一则新闻深受鼓舞,西工大硬核“女学神”白雨桐,获6所世界顶级大学博士录取 货真价值的才貌双全,别人家的孩子 高考失利与心仪的专业失之交臂,选择了软件工程这门自己完全不懂的专业.即便全部归零, ...

  9. hdu - 6281，2018CCPC湖南全国邀请赛F题,快排

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6281 题意: 根据已给出的式子,进行排序,然后输出排完序后原先的下表. 题解:用结构体保存,在用结构体 ...

  10. Kafka安装之二 在CentOS 7上安装Kafka

    一.简介 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这 ...