文档章节

css3旋转简易六面体

J
 Joudee
发布于 2015/10/02 11:10
字数 212
阅读 110
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

  <style>
        *{margin: 0;}
        .all{width: 200px;height: 200px;position: relative;left: 50%;margin-left: -100px;top: 200px;perspective: 3000px;-webkit-perspective:3000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
        .box{width: 200px;height: 200px;position: absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
        .box div{margin: 0;width: 200px;height: 200px;color: #fff;font-size: 30px;text-align: center;line-height: 200px;position: absolute;top: 0;left: 0;opacity: 0.7;}
        .front{transform: translateZ(100px)}
        .back{transform: translateZ(-100px)}
        .left{transform: translateX(-100px) rotateY(-90deg);}
        .right{transform: translateX(100px) rotateY(90deg);}
        .top{transform: translateY(100px) rotateX(90deg);}
        .bottom{transform: translateY(-100px) rotateX(-90deg);}


        .safa{animation: xx 5s infinite linear;-webkit-animation: xx 5s infinite linear;}
        @keyframes xx{
            0%{transform: rotate3d(0,1,0,0deg)}
            /*25%{transform: rotate3d(1,1,1,50deg)}*/
            /*50%{transform: rotate3d(1,0,1,120deg)}*/
            /*75%{transform: rotate3d(0,1,1,90deg)}*/
            100%{transform: rotate3d(0,1,0,360deg)}
        }
    </style>

    <div class="all">
        <div class="box safa">
            <div class="front" style="background-color: cadetblue">1</div>
            <div class="back" style="background-color: #145345">2</div>
            <div class="left" style="background-color: #789523">3</div>
            <div class="right" style="background-color: #132457">4</div>
            <div class="top" style="background-color: #325465">5</div>
            <div class="bottom" style="background-color: red">6</div>
        </div>
    </div>


© 著作权归作者所有

J
粉丝 0
博文 3
码字总数 571
作品 0
南京
私信 提问
基于HT的CSG功能构建HTML5的3D书架

构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算,将立方体、圆柱体和棱...

xhload3d
2014/12/25
1K
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
2018/06/26
0
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
JavaScript牛刀小试,结合CSS3动画属性来做一个系统时间同步的时钟

JavaScript总算入门了,复杂的就先不来了,今儿牛刀小试,先来一个系统同步的时钟效果,只用到最简单的获取系统时间的函数。因为学习是需要正反馈的,否则总也看不到效果,难免失了深入下去的...

泱泱
01/30
0
0
cae学科应用-有限元仿真分析技术中网格划分的类型与步骤详解

对于有限元分析来说,网格划分是其中最关键的一个步骤,网格划分的好坏直接影响到解算的精度和速度。网格化有三个步骤:定义单元属性(包括实常数)、在几何模型上定义网格属性、划分网格。 ...

jishulink
2018/01/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

跑分44W的荣耀V30 5G手机,真香!

     昨天看了红米K30的发布会,感触颇多啊,“卢本伟”就是雷军请来恶心荣耀的吧,恶心的还淋漓尽致,发布会全程diss荣耀V30,结果跑分出来的那一刻,网友们笑了。红米K30 26W+的跑分充...

梅丽莎好
16分钟前
7
0
技术分享 | 巧用 binlog Event 发现问题

作者:高鹏(八怪) 文章末尾有他著作的《深入理解 MySQL 主从原理 32 讲》,深入透彻理解 MySQL 主从,GTID 相关技术知识。 有了前面对 Event 的了解,我们就可以利用这些 Event 来完成一些...

爱可生
16分钟前
7
0
php之微信公众号发送模板消息

讲一下开发项目中微信公众号发送模板消息的实现过程(我用的还是Thinkphp5.0)。先看一下效果,如图: 就是类似于这样的,下面讲一下实现过程: 第一步:微信公众号申请模板消息权限: 立即申请...

owenzhang24
22分钟前
6
0
Dev 日志 | 如何将 jar 包发布到 Maven 中央仓库

摘要 Maven 中央仓库并不支持直接上传 jar 包,因此需要将 jar 包发布到一些指定的第三方 Maven 仓库,比如:Sonatype OSSRH 仓库,然后该仓库再将 jar 包同步到 Maven ,本文详细记录整个发...

NebulaGraph
33分钟前
5
0
海思3516cv500 SDK开发环境搭建

环境Ubuntu 16.0.4 LTS, SDK文件:Hi3516CV500_SDK_V2.0.1.0.tgz,解压此文件到当前目录运行Hi3516CV500_SDK_V2.0.1.0目录下的sdk.unpack,执行此脚本时报unknown source,但sdk.unpack脚本里...

仪山湖
35分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部