<!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. Alpha冲刺阶段集合贴

    第一篇:http://www.cnblogs.com/xss6666/p/8870734.html 第二篇:http://www.cnblogs.com/xss6666/p/8893683.html ...

  2. 碰到的一个新的东西——yaml，果然是个好东西

    yaml 基础语法可以看阮一峰大大的博客[yaml 语言教程] 看过了 xml 和 json之后,看一眼这个 yaml,觉得少写了好多东西,不用再去找层级关系了, yaml 直接一目了然,没有了尖括号 ...

  3. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  4. HDU4803_Poor Warehouse Keeper

    题目很有意思,我想说其实我在比赛的时候就看过了一下这个题目,今天才这么快搞出来吧. 其实总共按上键的次数不会超过10个,我们可以每次假设相隔按两次上键之间按了xi次下键,由于上键的次数是确定的,所以最 ...

  5. 【比赛】HNOI2018 道路

    这题很考思维啊,考验我们能否快速从省选难度跳转到普及难度 考试的时候真的想得太多,觉得省选不可能这么简单吧,然后就打脸 设 \(f[i][j][x]\) 表示从根到 \(x\) 号点,有 \(i\) ...

  6. 【BZOJ4889】不勤劳的图书管理员（树套树）

    [BZOJ4889]不勤劳的图书管理员(树套树) 题面 又是权限题,烦死了 洛谷真好 题解 分开考虑每一次交换产生的贡献. 假设交换\((x,y)\) 检查\(x\)与\(y\)对于区间\([x+1, ...

  7. LCA的倍增算法

    LCA,即树上两点之间的公共祖先,求这样一个公共祖先有很多种方法: 暴力向上:O(n) 每次将深度大的点往上移动,直至二者相遇 树剖:O(logn) 在O(2n)预处理重链之后,每次就将深度大的沿重链 ...

  8. 《剑指offer》— JavaScript（8）跳台阶

    跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 实现代码 function jumpFloor(number) { if (number& ...

  9. lnmp集成环境tp nginx vhost配置

    server { listen 80; server_name xxx; charset utf-8; root /home/wwwroot/axxx/public; index index.html ...

  10. Debian sudo自动补全

    解决 debian sudo TAB 键不能自动补全命令的原因 一般情况,命令行输入 sudo apt-get ins 按 tab ,它后面会自动补全为 install 如果右面写了包的名的一部分,按 ...