<!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. 基于bootstrap 的datatable插件的使用（php版）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...

  2. Asp.Net中应用Aspose.Cells输出报表到Excel 及样式设置

    解决思路: 1.找个可用的Aspose.Cells(有钱还是买个正版吧,谁开发个东西也不容易): 2.在.Net方案中引用此Cells: 3.写个函数ToExcel(传递一个DataTable),可以 ...

  3. Ubuntu 16.04系统布署小记

    前段时间趁着双11打折,又将阿里云主机续费了3年.之前布署的系统是Ubuntu 12.04,从系统发布到现在也有四年半了,其官方支持的生命周期也将止于明年春,且这在几年里出现了很多新的事物,我也需要跟 ...

  4. Python 学习随笔1

    在一个列表中,找出重复数组的位置. 比如在列表name = [1, 5, 8, 22, 56, 2, 8, 45, 7, 2, 35, 2, 486, 2, 152, 111, 265, 2, 2]中 ...

  5. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  6. 使用js设置input标签只读 readonly 属性

    先上代码: <html> <head> <title> test </title> <meta charset="utf-8" ...

  7. Boost学习笔记（五） progress_display

    progress_display可以在控制台显示程序的执行进度,如果程序执行很耗费时间,那么它能够提供一个友好的用户界面 #include <boost\timer.hpp> #inclu ...

  8. slide效果

    html和js部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. FontMetrics属性的介绍

    1.基准点是baseline 2.ascent:是baseline之上至字符最高处的距离 3.descent:是baseline之下至字符最低处的距离 4.leading:是上一行字符的descent ...

  10. 创建EF数据模型

    最后的应用程序,看上去就像下边这样: 创建数据模型,你将从以下三个类开始: 在Models文件夹,新建以下类: using System; using System.Collections.Gener ...