用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 背景颜色渐变的滑动条实现

    原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...

  2. WPF MVVM从入门到精通2：实现一个登录窗口

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

  3. [agc003F]Fraction of Fractal

    Description 传送门 Solution 本篇博客思路来自大佬的博客(侵删). 我们定义如果网格的第一行和最后一行的第i列都为黑色,则它是一个上下界接口.左右界接口定义同上. 如果上下界接口和 ...

  4. StringUtils工具类用法

    /*1.字符串以prefix开始*/ StringUtils.startsWith("sssdf","");//结果是:true StringUtils.sta ...

  5. 创建Springmvc项目时，特殊拦截器失效情况的原因及解决办法

    最近开发一个新项目时,搭建springmvc框架时,遇到一个拦截器失效的情况困扰了两天.现在解决,特此记录一下. 拦截器不生效的情况描述: 设置登录拦截的时候,首先登录接口肯定是不用拦截的.所以需要在 ...

  6. Maven学习(四)-----Maven中央存储库

    Maven中央存储库 当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没 ...

  7. sqlite两表更新update

    1 2 3 4 5 6 7 8 9 10 11 12 UPDATE t1 SET Column1 =   ( SELECT Columnx    FROM t2    WHERE t2. KEY = ...

  8. 接口自动化之接口工具选取(jmeter)

    jmeter进行接口测试,网上简易教程很多 其实关于HTTP接口测试的实现,网上还有很多其他工具诸如:http在线请求测试/谷歌插件postman/火狐插件等. 至于选择jmeter的原因,其实没有原 ...

  9. Java线程Run和Start的区别

    先上结论:run只是Thread里面的一个普通方法,start是启动线程的方法.何以见得呢?可以执行下面的代码看看run和start的区别: package com.basic.thread; /** ...

  10. 智慧树mooc自动刷课代码

    最近学习javaScript和JQuery,恰好还有一门mooc没有看.结合学习的知识和其他人的代码:撸了一个自动播放课程的代码,同时自动跳过单章的测试题. 用电脑挂着不动就完事了. 如下: var ...