<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<meta name="copyright" content="www.doyoe.com" />
<style>
body {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50%;
perspective-origin: 50%;
}
.cube {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate 5s infinite;
animation: rotate 5s infinite;
}
.cube > div {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 15px rgba(0, 0, 0, .2);
background-color: rgba(255, 255, 255, .1);
color: gray;
font-size: 20px;
line-height: 100px;
text-align: center;
}
.front {
-webkit-transform: translatez(50px);
transform: translatez(50px);
}
.back {
-webkit-transform: rotatey(180deg) translatez(50px);
transform: rotatey(180deg) translatez(50px);
}
.right {
-webkit-transform: rotatey(90deg) translatez(50px);
transform: rotatey(90deg) translatez(50px);
}
.left {
-webkit-transform: rotatey(-90deg) translatez(50px);
transform: rotatey(-90deg) translatez(50px);
}
.top {
-webkit-transform: rotatex(90deg) translatez(50px);
transform: rotatex(90deg) translatez(50px);
}
.bottom {
-webkit-transform: rotatex(-90deg) translatez(50px);
transform: rotatex(-90deg) translatez(50px);
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotatey(0);
}
to {
-webkit-transform: rotatey(360deg);
}
}
@keyframes rotate {
from {
transform: rotatey(0);
}
to {
transform: rotatey(360deg);
}
}
.c1 > div {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.c2 > div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>

<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>

3d旋转的更多相关文章

  1. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  2. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  3. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  4. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

  5. Flash相册-------3D旋转应用

    1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180

  6. 【学】CSS3的3D动画 ——3D旋转之骰子样式的钟表（2）上

    这个是3D旋转的进阶版,是一个类似与骰子的正方体.这个版本只有秒数的个位数,还没有写整个钟表,下面那个版本好好想想该怎么写 这个效果需要用到transform-style: preserve-3d. ...

  7. Android 滑动效果进阶篇（五）—— 3D旋转

    前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果. Animation实现动画有两个方式:帧动画(frame-by-frame animatio ...

  8. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  9. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  10. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

随机推荐

  1. c++ 注册类到 lua

    test.h: #ifndef __TEST_H__ #define __TEST_H__ class CTest { public: CTest(); ~CTest(); int getA(); v ...

  2. 2015/10 中外合璧再现辉煌—CCFC2015技术峰会

    笔者有幸参加了CCFC技术峰会,现在发布照片几张.大家看一下. 2015年10月14日,CCFC 2015电子数据取证技术峰会于四川成都举办,有200余名一线取证技术人员及国内外各行业专家参会.此次峰 ...

  3. jQuery使用serialize()表单序列化时出现中文乱码问题&js获取url中的参数,并保证获取到的参数不乱码

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComp ...

  4. JAVA NIO——Buffer和FileChannel

    Java NIO和IO的主要区别 IO NIO 面向流 面向缓冲 阻塞IO 非阻塞IO 无 选择器 示例: import java.io.FileInputStream; import java.io ...

  5. asp.net mvc adminlte第一波

    首页模板选用官方DEMO中的Blank模板,这个模板相对来说是最干净的. 首页模板的分割: 官方文档是分的4个部分 Wrapper .wrapper. A div that wraps the who ...

  6. POJ 3070 Fibonacci

    Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. F ...

  7. jQ中对attr()方法的理解

    在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^jquer ...

  8. CSS样式基础二

    一.列表 主要分为有序列表ol,无序列表ul <ul> <li></li> ... </ul> <ol> <li></li ...

  9. window 常用快捷键

    1.新建文件夹  ctrl+shift+n 2.删除文件夹  ctrl+d 3.打开命令行  窗口+r 4.关闭命令行  命令行内输入exit然后回车 5.快捷键操作浏览器 1)ctrl+w关闭当前标 ...

  10. javascript 组合

    1. 大数组中有m个元素,抽取其中的n个进行组合. var combination = function(arr, num){ var r=[]; (function f(t,a,n) { ) { r ...