一.设置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. openstack libtray

    OpenStack packages¶ Distributions release OpenStack packages as part of the distribution or using ot ...

  2. Android4.0 以后不允许在主线程进行网络连接

    Android4.0 以后不允许在主线程进行网络连接,否则会出现 android.os.NetworkOnMainThreadException.因此,必须另起一个线程进行网络连接方面的操作. pac ...

  3. 安装XCode导致mac无法正常开机怎么办

    作为一个IOS编程菜鸟,之前在网上买的IOS教程都坑爹的是xcode4以前的版本的,由于3和4界面变化较大,所以看着书往往不知所云,所以就迫不及待地从网上下载了XCode 3.2.5+iOS SDK ...

  4. Notepad++强大的代码补全和代码提示功能的方法

    最近写项目,经常要打开一些文件去修改一些代码段.那么我的项目都是使用ied大型编辑器去写的,每次修改文件,哪怕是一个标点都要用一分钟时间去打开软件.当然,后来我也考虑到使用记事本,但总感觉不是很爽. ...

  5. ROS学习笔记（九）——ROSSERVICE

    NEW 1 $ roscore NEW 2 $ rosrun turtlesim turtlesim_node NEW 3 $ rosrun turtlesim turtle_teleop_key N ...

  6. Java多线程异步调度程序分析（二）

    源自:http://blog.sina.com.cn/s/blog_4cc16fc50100c0uh.html public abstract class Result {   //抽象的结果类 pu ...

  7. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  8. NETBSD-DTARCE

    http://www.openbsd.org/papers/ https://2015.asiabsdcon.org/timetable.html.en#T3A http://teachbsd.org ...

  9. show()与showDialog()的区别

    A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.ShowDialog方法 (窗体显示为模式窗体) Form.Show方法 (窗体显示为无模式窗体) 2者具体区别如下: 1.在 ...

  10. Visual Studio 调试技巧 （三） -- 调试第三方组件代码

    上次我们提到,没有源代码而且没有调试符号,我们也可以 Debug.有人可能会问,我什么时候需要在这种情况下调试吗?! 是的.比方说,我们用了某些第三方的组件,这些组件里面难免也会有 Bug.就算是微软 ...