一.设置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. Yii 的AR单行数据自动缓存机制

    相关的YII类: CActiveRecord CActiveRecordBehavior cache Active Record Active Record (AR) 是一个流行的 对象-关系映射 ( ...

  2. PC-全国的 DNS服务商

    我们请选第2个.然后根据自己的省市来填写..我复制了下版主给的网站 北京:202.96.199.133 202.96.0.133 202.106.0.20 202.106.148.1 202.97.1 ...

  3. UILabel字体加粗等属性和特效

    /* Accessing the Text Attributes text  property font  property textColor  property textAlignment  pr ...

  4. POJ 2955 括号匹配，区间DP

    题意:给你一些括号,问匹配规则成立的括号的个数. 思路:这题lrj的黑书上有,不过他求的是添加最少的括号数,是的这些括号的匹配全部成立. 我想了下,其实这两个问题是一样的,我们可以先求出括号要匹配的最 ...

  5. MVC母版面，子页的脚本生成在最后

  6. medoo数据库插入的问题

    今天遇到疾行客同学提出的medoo insert方法不能插入数据库问题,我测试了一下 发现是可以的 而INSERT INTO "t_user" (username) VALUES ...

  7. 用CS-Script把Notepad++变身支持智能提示和运行代码的C#集成开发环境

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用CS-Script把Notepad++变身支持智能提示和运行代码的C#集成开发环境.

  8. MVC 音乐商店 第 9 部分： 注册和结帐

    MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...

  9. POJ 3734

    题目的大意: 给定待粉刷的n个墙砖(排成一行),每一个墙砖能够粉刷的颜色种类为:红.蓝.绿.黄, 问粉刷完成后,红色墙砖和蓝色墙砖都是偶数的粉刷方式有多少种(结果对10007取余). 解题思路: 思路 ...

  10. 2440test 裸机測试 调试不进main 设置改动方法

           2440test没进main函数并非跑飞.bin文件已经烧写到开发板里了的 而是没选择载入文件,导致不能调试程序文件 主要设置例如以下: