一.设置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. liunx shell数字相加

    #!/bin/bash num1= num2= num3= #echo $($num1+$num2+$num3)#错误写法 echo $[$num1+$num2+$num3] echo $(($num ...

  2. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  3. Android studio开发常用快捷键

    最常用快捷键 1.Ctrl+E  可以显示最近编辑的文件列表 2.Shift+Click(点击)  可以关闭文件 3.Ctrl+[或者ctrl+]  可以跳到大括号的开头结尾 4.Ctrl+Shift ...

  4. 解决IE11不能进行webTest脚本录制的方法

    当win7的ie8升级到ie11后,我的vs2012里的web性能测试用不了了,在打开IE11后,录制栏不见了,在网上找了很多资料没有结果,最后,在IE工具里发展了原因 工具->管理加载项-&g ...

  5. BA的广度和深度

    http://insights.thoughtworkers.org/ba-capability-and-development-path-in-thoughtworks/ 作者:ThoughtWor ...

  6. resin 4.0数据源的配置

    在resin 的conf 文件下有resin.xml  我们在这里能够配置数据源以及配置项目 一.配置多个数据源,多个项目共享这些数据源.也就是这些数据源配置在<host>   </ ...

  7. Strtus2标签之<s:url>

    Strtus2标签<s:url> 在没有使用Struts2的时候可以使用el来进行url传参.而在Struts2中不推荐使用el(其实在Struts2.0.0.11之后就不再支持el)而推 ...

  8. Android开发之Action Bar

    Action Bar代替了传统的位于设备屏幕的标题栏,主要用来显示应用程序的图标和活动的名称以及添加定制动作项等功能. 1. 显示和隐藏Action Bar 显示和隐藏Action Bar 一般有两种 ...

  9. Bootstrap--全局css样式之表单

    单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置 ...

  10. H TML5 之 （1） 初识HTML5

    新特性 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foo ...