点击这里查看效果：
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. JavaScript必须了解的知识点总结。

    整理的知识点不全面但是很实用. 主要分三块: (1)JS代码预解析原理(包括三个段落): (2)函数相关(包括 函数传参,带参数函数的调用方式,闭包): (3)面向对象(包括 对象创建.原型链,数据类 ...

  2. WPF datagrid 加入图片

    <DataGridTemplateColumn Header="图像" Width="SizeToCells"> <DataGridTempl ...

  3. Android Studio使用技巧：导出jar包

    转自http://blog.csdn.net/lincyang/article/details/44457799 AS中并没有独立的Module 工程,但是可以在普通的Project中加入Module ...

  4. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  5. SAE学习-使用SAE的Storage服务存储图片

    看到园子里面有同学写了一篇<基于PHP实现阿里云开放存储服务>,围观地址:http://www.cnblogs.com/nosqlcoco/p/3474773.html.想起自己也在Sin ...

  6. Kubernetes集群搭建过程中遇到的问题

    1. 创建Nginx Pod过程中报如下错误: #kubectlcreate -f nginx-pod.yaml Error from server: error when creating &quo ...

  7. 在非SQL客户端使用命令行方式定期连接SQL Server 服务器并模拟用户查询操作，同时输出信息内容

    一个很长的标题,实现的功能就是尽量使用非人力的方式模拟人去做一件事情,为了便于记录,将他们输出成文件方便查阅. 图形界面方式,使用微软自己的ConnMaker.exe,或者Microsoft 数据连接 ...

  8. grunt任务之seajs模块打包

    grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...

  9. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...

  10. 【JavaWeb】MVC案例之新闻列表

    MVC案例之新闻列表 作者:白宁超 2016年6月6日15:26:30 摘要:本文主要针对javaweb基本开发之MVC案例的简单操作,里面涉及mysql数据库及表的创建,以及jsp页面和servle ...