点击这里查看效果：
http://keleyi.com/a/bjad/s89uo4t1.htm

效果图：

CSS3 transform-style 属性

以下是代码：

 <!DOCTYPE html>

 <html>

 <head>

 <title>transform-style实现Div的3D旋转-柯乐义</title>

 <style>

 *{font-size: 24px;color: #00ff00; padding:0; margin:0;}

 #container {

 position: relative;

 height: 300px;

 width: 300px;

 -webkit-perspective: 500;

 margin-top: 200px;

 margin-right: auto;

 margin-left: auto;

 }

 #parent-keleyi-com {

 margin: 10px;

 width: 280px;

 height: 280px;

 background-color: #666;

 opacity: 0.3;

 -webkit-transform-style: preserve-3d;

 -webkit-animation: spin 15s infinite linear;

 }

 #parent-keleyi-com > div {

 position: absolute;

 top: 40px;

 left: 40px;

 width: 280px;

 height: 200px;

 padding: 10px;

 -webkit-box-sizing: border-box;

 }

 #parent-keleyi-com > :first-child {

 background-color: #000;

 -webkit-transform: translateZ(-100px) rotateY(45deg);

 }

 #parent-keleyi-com > :last-child {

 background-color: #333;

 -webkit-transform: translateZ(50px) rotateX(20deg);

 -webkit-transform-origin: 50% top;

 }

 /*执行Y轴旋转360度动画*/

 @-webkit-keyframes spin {

 from {-webkit-transform: rotateY(0);}

 to {-webkit-transform: rotateY(360deg);}

 }

 </style>

 </head>

 <body>

 <div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>

 <div id="container">

 <div id="parent-keleyi-com">

 <div><a href="/">柯乐义</a></div>

 <div><a href="/">keleyi.com</a></div>

 </div>

 </div>

 </body>

 </html>

原文：http://keleyi.com/a/bjad/s89uo4t1.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

低调奢华 CSS3 transform-style 3D旋转的更多相关文章

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

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

  2. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  3. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  4. CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  5. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  6. css3相册图片3D旋转展示特效

    查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...

  7. CSS3特效----制作3D旋转照片展示区

    任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204, ...

  8. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  9. 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...

  10. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

随机推荐

  1. is_null, empty, isset, unset对比

    is_null, empty, isset, unset 我们先来看看这4个函数的描述 isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_null ...

  2. SQL 必知必会

    本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...

  3. Design7：数据删除设计

    在设计一个新系统的Table Schema的时候,不仅需要满足业务逻辑的复杂需求,而且需要考虑如何设计schema才能更快的更新和查询数据,减少维护成本. 模拟一个场景,有如下Table Schema ...

  4. Android图片处理

    相信做Android开发的小伙伴对于Android图片压缩.裁剪一定有很深的印象,今天我将带领大家一起学习一下这个看着高深莫测的知识,以便再以后的学习.工作中可以帮助到大家. 首先我们看一下这个问题出 ...

  5. MVC实用架构设计（三）——EF-Code First（3）：使用T4模板生成相似代码

    前言 经过前面EF的<第一篇>与<第二篇>,我们的数据层功能已经较为完善了,但有不少代码相似度较高,比如负责实体映射的 EntityConfiguration,负责仓储操作的I ...

  6. ASP.NET Core的配置（1）：读取配置信息

    提到"配置"二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化 ...

  7. Rust初步（七）：格式化

    在Rust中,如果要进行屏幕输出,或者写入到文件中,需要对数据进行格式化.这一篇总结一下它所支持的几种格式化方式. 这篇文章参考了以下官方文档,不过,按照我的风格,我还是会突出于C#语言的比较,这样可 ...

  8. Android随笔之——获取EditText光标所在行行号

    由于项目需求,需要获取EditText光标当前所在行行号,可是翻遍Android文档.问遍度娘都没发现,于是在博客园中提问,碰见了好心人告诉了我答案,谨以以下代码献给有需要的人 private int ...

  9. phpstorm 63342默认端口怎么修改

    phpstorm进行网页调试的时候,默认是加端口号63342,在配置本地php环境的时候默认端口不一定是63342这个,更多的是系统默认的端口号80,那么问题就出现了,如何在phpstorm中将633 ...

  10. ANNOTATION PROCESSING 101 by Hannes Dorfmann — 10 Jan 2015

    原文地址:http://hannesdorfmann.com/annotation-processing/annotationprocessing101 In this blog entry I wo ...