源代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        background-color: #000;
    }
        .outer{
            width: 400px;
            height: 400px;
            border:1px solid #000;
            margin: 300px 500px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-38deg)rotateY(-35deg) ;
            animation: mofang 5s linear infinite;
        }
        @keyframes mofang{
            from{
                transform:rotateX(0deg) rotateY(0deg);

}
            50%{
                transform:rotateY(120deg) rotateZ(240deg);

}
            to{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
        .inner{
            width: 400px;
            height: 400px;
            border:2px solid #000;
            position: absolute;
            -webkit-backface-visibility:visibility;
            opacity: 0.5;

}
        .inner:nth-child(1){
            transform: translateY(200px)rotateX(90deg);
            background-color: orange;
        }
        .inner:nth-child(2){
            transform: translateY(-200px)rotateX(90deg);
            background-color: blue;
        }
        .inner:nth-child(3){
            transform: translateY(100px)rotateX(90deg);
            
        }
        .inner:nth-child(4){
            transform: translateY(-100px)rotateX(90deg);
        
        }
        .inner:nth-child(5){
            transform: translateZ(200px);
            background-color: pink;
        }
        .inner:nth-child(6){
            transform: translateZ(100px);
            
        }
        .inner:nth-child(7){
            transform: translateZ(-200px);
            background-color: yellow;
        }
        .inner:nth-child(8){
            transform: translateZ(-100px);
    
        }
        .inner:nth-child(9){
            transform: translateX(100px)rotateY(90deg);
        
        }
        .inner:nth-child(10){
            transform: translateX(-100px)rotateY(90deg);
            
        }
        .inner:nth-child(11){
            transform: translateX(200px)rotateY(90deg);
            background-color: red;
        }
        .inner:nth-child(12){
            transform: translateX(-200px)rotateY(90deg);
            background-color: green;
        }
        .inner:nth-child(13){
            transform:rotateY(90deg);
            
        }
        .inner:nth-child(14){
            transform:rotateY(90deg);

}
        .inner:nth-child(15){
            transform:rotateX(90deg);

}
        .inner:nth-child(16){
            transform:rotateZ(90deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</body>
</html>

效果图:

个人制作-css+html旋转立方体的制作的更多相关文章

  1. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  3. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  4. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  5. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  6. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  7. css3之3D 旋转立方体与哆啦A梦

    主要记录两个css3 3D转换的示例   ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...

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

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

  9. Windows PE3.0制作方法(从Win7中提取制作）

    Windows PE3.0制作方法(从Win7中提取制作 在d:新建文件夹winpe,在winpe中新建sources.pe3和new文件夹,把附件中提供的工具imagex连文件夹一起放到winpe目 ...

随机推荐

  1. YII2 缩略图生成 第三方包修改

    "xj/yii2-thumb-action": "^2.0" 原本的上传路径是全路径 根据日期生成的上传文件夹 不适用 比如 : upload\article\ ...

  2. 计算机网络(10)-----TCP的拥塞控制

    TCP的拥塞控制 拥塞(congestion) 在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就要变坏. 拥塞控制 拥塞控制就是防止过多的数据注入到网络中,这样可以使网 ...

  3. 6、Concurrent-Mark-Sweep

    1.cms 主要用于年老代垃圾回收 2.这玩意牺牲通吐量换取最短垃圾回收时间 3.有的地方说是四个阶段,有的地方说五个阶段,还有六个阶段的,真相是----我也不知道 四个阶段: Initial mar ...

  4. Secondary NameNode:的作用？

    前言 最近刚接触Hadoop, 一直没有弄明白NameNode和Secondary NameNode的区别和关系.很多人都认为,Secondary NameNode是NameNode的备份,是为了防止 ...

  5. 转 从腾讯那“偷 了”3000万QQ用户数据

    http://www.icaijing.com/hot/article4899809/ http://news.cnblogs.com/n/533061/

  6. mseed2sac的安装和使用

    由于使用rdseed提取mseed文件到SAC文件会遇到一个问题就是: 同时需要dataless文件: 因此如果下载的数据中恰巧没有dataless文件,则需要用另外一种方式:mseed2sac 现在 ...

  7. 推荐几款实用的Android Studio 插件

    推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...

  8. github的使用步骤及体会

      对于github的readme文件的提交,很是坎坷.   首先打开了github的首页,对于满屏的英文,我是头大的.百度搜索教程,百度翻译等等,这些都使用上了.带着试一试的态度,我按了creat ...

  9. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  10. C语言程序设计第9堂作业

    一.本次课主要内容: 本章将散布在前五章中的数据类型和表达式等内容做了归纳性的汇总,本次课需要掌握以下两个方面: (1)本次课通过从数据在计算机内的存储格式入手,介绍整型.字符型.单精度和双精度实型四 ...