点击这里查看效果：
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. Qt 之 数字钟

    本例用来展示 QTimer 的使用,如何定时的更新一个窗口部件. 1  QLCDNumber 类 QLCDNumber 是一种可将数字显示为类似 LCD 形式的窗口部件,它同 QLabel 一样,都继 ...

  2. LINQ系列：Linq to Object联接操作符

    联接是指将一个数据源对象与另一个数据源对象进行关联或联合的操作.这两个数据源对象通过一个共同的值或属性进行关联. LINQ的联接操作符将包含可匹配(或相同)关键字的两个或多个数据源中的值进行匹配. L ...

  3. Minor【 PHP框架】2.第一个应用与请求的生命周期

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

  4. 创建第一个 vlan network "vlan100" - 每天5分钟玩转 OpenStack（94）

    上一节我们在 ML2 配置中 enable 了 vlan network,今天将创建 vlan100 并讨论底层网络变化. 打开菜单 Admin -> Networks,点击 “Create N ...

  5. EntityFramework之数据库以及表基本创建（一）

    前言 之前有学过EF一段时间那时EF才4.0似乎还不太稳定,而现在EF都已7.0版本,同时AspNet Identity都与此大有关联,看来是大势所趋于是开始学习EF,在学EF过程中也遇到一些小问题, ...

  6. 解决在配置Oracle数据库连接错误问题

    项目开发使用的Oracle,但是使用了不同的版本的Oracle数据库.然后自己在电脑上安装了2个连接客户端,版本分别是: 10.2.0 12.1.0 用Toad for Oracle 9.0的时候,我 ...

  7. SubSonic3.0使用例子

    前段时间开发的框架使用了SubSonic2.2以后,觉得开发效率提高了不少,后期维护起来也非常方便,不由的喜欢上了SubSonic.中间有想过升级到更高版本,但度娘一下就放弃了,只有极少的中文版说明, ...

  8. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  9. 3.Struts2配置文件标签介绍

    Struts2的很多核心功能都是由拦截器实现的. struts-default.xml中定义了这些拦截器与Result类型. 所以,不继承struts-default包,Struts2提供的很多核心功 ...

  10. CloudNotes云端个人笔记系统系列文章汇总

    [CloudNotes版本更新信息与下载地址:http://cloudnotes.cloudapp.net/webapi/Home/Release] [CloudNotes RESTful API帮助 ...