一.设置3D场景

perspective:800       //浏览器到物体的距离(像素)
perspective-origin:50% (x轴） 50% （y轴)    //视点的位置

transform-style: preserve-3d;

示例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

	#experiment{

		 -webkit-perspective: 800;

		 -webkit-perspective-origin: 50% 50%;

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

	}

	.block{

		width:500px;

		height:500px;

		text-align:center;

		line-height:450px;/*牢记居中用行高 */

		font-size:100px;

		background-color:burlywood;

		margin:100px auto;

		transform:rotatex(45deg);

		/*transform:rotatey(45deg);

		transform:rotatez(45deg);*/

	}

	</style>

</head>

<body>

	<div id="experiment">

		<div class="block">css3</div>

	</div>

</body>

</html>

　　

css3学习--css3动画详解二（3d效果）的更多相关文章

  1. [CSS3] 学习笔记-选择器详解（二）

    1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...

  2. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  3. [CSS3] 学习笔记-选择器详解（三）

    1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...

  4. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  5. css3(border-radius)边框圆角详解（转）

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  6. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  7. Android Animation动画详解（二）： 组合动画特效

    前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...

  8. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  9. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

随机推荐

  1. 记录一次MVC3升级MVC4遇到的问题

    前些天,项目组将项目从mvc3升级至mvc4,完了之后,发现突然涌现出一大堆问题.主要是在前端,Razor引擎升级导致的. Razor是从mvc3开始引入的,用过mvc2的就会知道,Razor用起来确 ...

  2. MySQL外键约束On Delete、On Update各取值的含义

    主键.外键和索引的区别?   主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...

  3. HDU 4635 多校第四场 1004 强联通

    我还有什么好说,还有什么好说...... 我是SBSBSBSBSBSBSBSBSBSBSBSBBSBSBSBSBSBSBSBSBS........................ 题意 思路什么的都不 ...

  4. 改变JVM中的参数以提高Eclipse的运行速度

    首先建立评估体系,将workspace里所有的项目close掉,关闭eclipse.优化的用例就是启动eclipse,open一个项目,eclipse会自动build这个项目,保证没有感觉到明显的卡, ...

  5. ASP.NET MVC- VIEW Creating Page Layouts with View Master Pages Part 4

    In this tutorial, you learn how to create a common page layout for multiple pages in your applicatio ...

  6. JDBC——Sql Server

    sun公司设计一套java语言操作不同的数据库提供的是接口,二具体的实现类是由各大数据库厂商实现的. private static final String driver= "com.mic ...

  7. 李炎恢bootstarp_项目实战__瓢城企业(注释+源码)

    源代码下载地址:http://pan.baidu.com/s/1gfI9Pj9 /********************************* pc界面设备页面***************** ...

  8. Android开发：如何安全的中止一个自定义线程Thread

    http://blog.csdn.net/yanzi1225627/article/details/8582078 经研究,我推荐这种写法: /*自定义线程*/ class MyThread impl ...

  9. Ebean Demo

    ebean  orm框架,其作者觉得hibernate的bean管理会话管理.难以在短时间明确,就自己搞了一套,就成了如今的ebean. ebean被一些开发人员这觉得是一把瑞士军刀.能够看出一些程序 ...

  10. Glossary of Terms in the JavaTM platform --reference

    http://docs.oracle.com/javase/tutorial/information/glossary.html field :A data member of a class. Un ...