-
css教程之perspective() [透视]
- 2017-05-25 23:26 来源:未知
语法
transform:perspective(length);
perspective:<length>;
perspective:<length>;
语法项目 | 说明 |
---|---|
初始值 | none |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
取值 | 长度值 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
perspective 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置,并将可视内容映射到一个视锥上,继而投影到一个 2D 视平面上。如果不指定透视,则 Z 空间中的所有点将平铺到同一个 2D 视平面中,并且变换结果中将不存透视深概念。作用于元素的子元素。
perspective有两种写法,一种是设置所有的子元素有一个共同的透视值,perspective作为一个属性值来写;一种是直接作用于元素本身,perspective作为transform的一个函数来写如:
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}
关联属性:perspective-origin。
取值
none:没有透视变换功能。
length:指定一个透视值。
实例代码
CSS
- .perspective_none{
- position:relative;
- background:#4d6ea6;
- float:left;
- margin:50px;
- -webkit-animation:perspective_none 4s infinite linear;
- -moz-animation:perspective_none 4s infinite linear;
- }
- .perspective_value{
- position:relative;
- background:#4d6ea6;
- float:left;
- margin:50px;
- -webkit-animation:perspective_value 4s infinite linear;
- -moz-animation:perspective_value 4s infinite linear;
- }
- @-webkit-keyframes perspective_none{
- 0%{-webkit-transform:rotateX(0deg);}
- 100%{-webkit-transform:rotateX(360deg);}
- }
- @-moz-keyframes perspective_none{
- 0%{-moz-transform:rotateX(0deg);}
- 100%{-moz-transform:rotateX(360deg);}
- }
- @-webkit-keyframes perspective_value{
- 0%{-webkit-transform:perspective(500px) rotateX(0deg);}
- 100%{-webkit-transform:perspective(500px) rotateX(360deg);}
- }
- @-moz-keyframes perspective_value{
- 0%{-moz-transform:perspective(500px) rotateX(0deg);}
- 100%{-moz-transform:perspective(500px) rotateX(360deg);}
- }
复制
HTML
运行一下 » CSS3 创建3D模型 »- <div class="demo_box perspective_none">没有设置3D透视%</div>
- <div class="demo_box perspective_value">透视为500px</div>
复制
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |
最新更新
unittest的TestCase类提供的判断方法
python基础教程之unittest模块(单元测试)
python基础教程之Python的特点(优点和缺点
python基础教程之Python是什么,Python简介
python基础教程之编译型语言和解释型语言
python基础教程之编程语言是什么
python基础教程之Python assert断言函数及用法
python基础教程之Python 文件 truncate() 方法
python基础教程之Python 文件 write() 方法
python基础教程之Python 文件 writelines() 方法
基于UDP的服务器端和客户端
再谈UDP和TCP
在socket编程中使用域名
网络数据传输时的大小端问题
socket编程实现文件传输功能
如何优雅地断开TCP连接?
图解TCP四次握手断开连接
详细分析TCP数据的传输过程
图解TCP数据报结构以及三次握手(非常详
TCP协议的粘包问题(数据的无边界性)
sql语句大全之Microsoft SQL Server 2012安装说明
sql语句大全之随机姓名生成方法
sql语句大全之SQL干货笔记
access数据库之随说秋色园从Access升迁到
access数据库之微信公众平台开发(26) ACCE
access数据库之ACCESS TOKEN
access数据库之当爬虫被拒绝时(Access Deni
access数据库之当爬虫被拒绝时(Access Deni
access数据库之使用PowerDesigner生成Access数据
access数据库之让ADO.NET Entity Framework 支持