点击这里查看效果：
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. CSS学习笔记2-2d变换和过渡属性

    前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

  2. python基础篇----字符串unicode

    python中处理中文常要用到unicode,因为较容易遇到字符串编码的问题,我一般都是将字符串统一转成unicode去处理 python中定义一个unicode字符串,可以在字符串前面加u: str ...

  3. CSS3总结 （帅哥）

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷 ...

  4. 有吧友需要PDF的下载站点，好吧，我这边汇总一下

    [经验]谈谈怎么找自己想要的资源吧~ http://www.cnblogs.com/dunitian/p/4715482.html PDF Free Computer, Programming, Ma ...

  5. Web APi入门之Self-Host寄宿及路由原理（二）

    前言 刚开始表面上感觉Web API内容似乎没什么,也就是返回JSON数据,事实上远非我所想,不去研究不知道,其中的水还是比较深,那又如何,一步一个脚印来学习都将迎刃而解. Self-Host 我们知 ...

  6. ECMAScript5之StrictMode

    ECMAScript5引入一个严格模式的概念(Strict Mode). 它的作用就是不让Javascript的容错那么高,让我们对编写代码的规范要求高一点. 比如,当我们使用严格模式编写JavaSc ...

  7. 应用程序框架实战十一:创建VS解决方案与程序集

    上一篇,介绍了开发环境需要的工具和版本,本篇将动手创建VS解决方案. 对于本系列文章提供的示例,我想通过两种途径来演示,一种是单元测试,另外为了能更直观的看到效果,还会提供一个用户界面来展示.为了不分 ...

  8. PHP面试题目搜集

    搜集这些题目是想在学习PHP方面知识有更感性的认识,单纯看书的话会很容易看后就忘记. 曾经看过数据结构.设计模式.HTTP等方面的书籍,但是基本看完后就是看完了,没有然后了,随着时间的推移,也就渐渐忘 ...

  9. Oracle11g中数据的倒库和入库操作以及高版本数据导入低版本数据可能引发的问题

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在10g之前,传统的导出和导入分别使用EXP工具和IMP工具 ...

  10. Switch to strategy

    namespace RefactoringLib.SwitchToStrategy.Before { public class ClientCode { public decimal Calculat ...