<!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-DAY4

    每日立会 昨天的工作. 张陈东芳:sql语句存储商品信息 吴敏烽:调试获取商品信息的方法 周汉麟:根据商品编号来获取商品资料方法调试 林振斌:输出最近浏览记录的方法检查 李智:cookies的检查 全 ...

  2. 一次性无重复配置VS项目插件属性的方法

    在VS中需要使用opencv开源库或mysql等数据库时,为了能使用开源库或数据库的语言,需要添加库文件和包含目录等等.然而直接在[解决方案管理器]-->属性中配置的话,写下一个项目(解决方案) ...

  3. Delphi DbGridEh实现表格没有内容的渐变效果

    OptionsEh = dghExtendVertLines  就会有这个效果, 去掉就会没有这个效果

  4. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. ural1519-Formula 1

    题意 给出一个 \(n\times m\) 的棋盘,上面有一些格子是不能经过的.求有多少种欧拉回路可以经过所有可经过到格子.\(n,m\le 12\) . 分析 上个月就看了一下插头dp,然而这道题写 ...

  6. C++解析-外传篇(2)：函数的异常规格说明

    0.目录 1.异常规格说明 2.unexpected() 函数 3.小结 1.异常规格说明 问题: 如何判断一个函数是否会抛出异常,以及抛出哪些异常? C++提供语法用于声明函数所抛出的异常 异常声明 ...

  7. ans menu list

    ans menu list 1. 系统配置 a) 基本设置 i. NTP ii. 配置模式 iii. 主机信息 b) 高可用性 i. 节点 ii. 路由监视器 iii. 故障转移接口群 c) 设备标识 ...

  8. 【CF625E】Frog Fights（模拟）

    [CF625E]Frog Fights(模拟) 题面 CF 洛谷 翻译: 有\(n\)只青蛙在一个被分为了\(m\)等分的圆上,对于每份顺时针依次标号. 初始时每只青蛙所在的位置是\(p_i\),速度 ...

  9. splay tree 学习笔记

    首先感谢litble的精彩讲解,原文博客: litble的小天地 在学完二叉平衡树后,发现这是只是一个不稳定的垃圾玩意,真正实用的应有Treap.AVL.Splay这样的查找树.于是最近刚学了学了点S ...

  10. MSF下ms17_010_psexec模块使用技巧

    0x01 前言 MS17-010 的psexec是针对Microsoft Windows的两款最受欢迎的漏洞进行攻击. CVE-2017-0146(EternalChampion / EternalS ...