<!DOCTYPE html>
<html>
<head>
<title>css-3d-盒子</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=750, user-scalable=no" />
<style>
body {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
}

.stage {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(#5f4479,#3c3c3c);
}

.css3d {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
transform: rotate(0deg);
animation: aniTo 5s linear infinite;
transform-style: preserve-3d;
}

.css3d > div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(3, 255, 224, 0.5);
border-radius: 10%;
text-align: center;
line-height: 200px;
font-size: 100px;
font-weight: bold;
color: #FFF;
}

.top {
transform: rotateX(90deg) translateZ(100px);
}

.bottom {
transform: rotateX(80deg) translateZ(-100px);
}

.left {
transform: rotateY(90deg) translateZ(100px);
}

.right {
transform: rotateY(90deg) translateZ(-100px);
}

.qian {
transform: rotateZ(0deg) translateZ(100px);
}

.hou {
transform: rotateZ(0deg) translateZ(-100px);
}

@keyframes aniTo {
0% {
transform: rotateX(0deg) rotateY(0deg);
}

100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="stage">
<div class="css3d">
<div class="top">1</div>
<div class="bottom">2</div>
<div class="left">3</div>
<div class="right">4</div>
<div class="qian">5</div>
<div class="hou">6</div>
</div>
</div>
</body>
</html>

旋转3D立方体的更多相关文章

  1. CSS3 旋转3D立方体

    <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } @-webkit-keyframe ...

  2. css3-实现3D立方体旋转

    核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...

  3. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  4. js拖拽3D立方体旋转

    这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图 代 ...

  5. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  6. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  7. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  8. CSS3之3D立方体效果

    下面代码可实现3D立方体,比较好理解,就是让每个面先平移到指定位置,然后旋转90度 <!DOCTYPE html> <html lang="en"> < ...

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

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

随机推荐

  1. 软工网络15团队作业4-DAY6

    每日例会 昨天的工作. 张陈东芳:sql语句查询商品信息 吴敏烽:商品类的规范化编写 周汉麟:界面的排版优化 林振斌:商品类排序的实现 李智:研究商品信息的显示 全体人员:初次统一调试 今天计划的工作 ...

  2. 结对编程——paperOne基于java web的简易四则运算出题网站

    项目成员:张金生     张政 需求分析: 1.要进行四则运算: 2.运算题目随机: 3.进行对错判断: 4.整数运算. 程序概要: 1.用JSP实现: 2.用户可选择题目数量: 3.答题页用表格列出 ...

  3. Q3 大型科技公司季报

    1. alphabet Alphabet(谷歌母公司)今天发布了截至9月30日的2018财年第三季度财报.报告显示,Alphabet第三季度总营收为337.40亿美元,比上年同期的277.72亿美元增 ...

  4. 这可能是目前最全的Redis高可用技术解决方案总结

    本文主要针对 Redis 常见的几种使用方式及其优缺点展开分析. 一.常见使用方式 Redis 的几种常见使用方式包括: Redis 单副本: Redis 多副本(主从): Redis Sentine ...

  5. Java对象空间分配流程

    对象空间分配流程如下:   针对这个流程,分别解释一下每一个选项的使用场景. 栈上分配: 栈上分配的基础在于逃逸分析,逃逸分析可以得到三种对象的逃逸状态. 全局逃逸:一个对象的引用逃出了方法或者线程. ...

  6. LoadRunner脚本增强技巧之参数化（一）

    参数化的方式有两种,一种通过File引入参数值,一种通过数据库引入参数值.本篇介绍File方式引入参数值. 一.File方式参数化过程 1.在脚本中找到需要做参数化的字符串,选中,右键点击,选择Rep ...

  7. debug - taotao项目 - IDEA拖动文件的自动重命名是超级巨坑, 一定要非常小心

    大量的如下错误: org.springframework.beans.factory.BeanCreationException: Could not autowire field 还是要相信报错 不 ...

  8. oracle job定时执行存储过程

     JOB定时跑插入语句1.建插入数据的存储过程create or replace procedure report_web asV_START_DATE DATE;V_END_DATE  DATE;b ...

  9. 51nod1222 最小公倍数计数 莫比乌斯反演 数学

    求$\sum_{i = 1}^{n} \sum_{j = 1}^{i} [lcm(i, j) \le n]$因为这样不好求,我们改成求$\sum_{i = 1}^{n} \sum_{j = 1}^{n ...

  10. A2W W2A等所需要的文件

    1.包含头文件 #include <atlbase.h> #include <atlconv.h> 2.在使用前加上,注意,不是在文件都定义. USES_CONVERSION;