点击这里查看效果：
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. iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  2. python中协程

    在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...

  3. LinQ to entities 不能识别方法“system.string.ToString(system.String)”.因此该方法无法转换为存储表达式

    [我也是刚研究IEnumerable和IQueryable]以下都是个人理解,仅供参考,如有错误欢迎指出~ 在EF里面,使用IQueryable和IEnumerable可以延迟加载. IQueryba ...

  4. Minor【 PHP框架】4.服务容器与服务提供者

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  5. C#中的readonly与const的比较

    C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景.工作原理 readonly为运行时常量,程序运行时进行赋 ...

  6. 用jquery.pager.js实现分页

    1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...

  7. 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel

    今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...

  8. Java 8新特性-2 接口定义增强

    为了解决当原有的接口中方法不足时,向原有的接口中添加新的方法,该接口下的N多实现类也需要重写该方法的问题!Java8引入了接口定义增强概念! Java8 打破了原有的接口的方法定义: 公共的.抽象的  ...

  9. 深入理解 OWIN 中的 Host 和 Server

    The Open Web Interface for .NET (OWIN),注意单词为大写,之前好像都写成了 Owin,但用于项目的时候,可以写成:Microsoft.Owin.*. OWIN 体系 ...

  10. mysql乐观锁总结和实践--转

    原文地址:http://chenzhou123520.iteye.com/blog/1863407 上一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任 ...