一.设置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. make it clear how to use const in C++

    1.first of all,take a lookup on the left side of keyword const.If there is something(type or pointer ...

  2. Java的垃圾回收概述

    Java语言建立了垃圾收集机制,即GC,用以跟踪正在使用的对象和发现并回收不再使用的对象,垃圾清理势在必行,以下讲述java垃圾收集算法. 1.Java垃圾收集算法的核心思想 Java语言建立了垃圾收 ...

  3. 网上下载的 java开源项目 如何 打jar包

    目前很多java开源项目(例如qlexpress)只提供了源码,没有提供jar,下面提供maven打jar包的方法. 1.进入qlexpress下载后源代码所在的目录,此目录应包含pom.xml,如下 ...

  4. Day 3 @ RSA Conference Asia Pacific & Japan 2016 （morning）

    09.00 – 09.45 hrs Tracks Cloud, Mobile, & IoT Security    A New Security Paradigm for IoT (Inter ...

  5. .jar是什么文件？(转载)

    JAR(Java ARchive,Java 归档)是一种与平台无关的文件格式,可将多个文件合成一个文件.用户可将多个 Java applet 及其所需组件(.class 文件.图像和声音)绑定到 JA ...

  6. 关于T-SQL重编译那点事，WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗

    本文出处:http://www.cnblogs.com/wy123/p/6262800.html   在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的 ...

  7. DataTable导入到Excel文件

        ;                saveFileDialog.RestoreDirectory = ;            , intIndex] = column.ColumnName; ...

  8. Java三大主流框架概述(转载)

    转自:http://www.douban.com/note/320140839/ Struts.Hibernate和Spring是我们Java开发中的常用关键,他们分别针对不同的应用场景给出最合适的解 ...

  9. sift算法c语言实现

    前段时间在做三维測量方面的研究.须要得到物体表面三维数据.sift算法是立体匹配中的经典算法.以下是对RobHess的SIFT源码的凝视.部分内容參考网上,在这里向各位大神表示感谢. http://b ...

  10. ubuntu 14.04/15.10 安装基于eclipse的android app开发环境

    一开始是装了ubuntu15.10,不知道是我的x200机器太old还是iso镜像有问题,总是各种莫名的引导不起来.有时候刚刚装好的干净系统,只install了一个vim和openssh,重启,然后就 ...