perspective透视设置
目前只适用于webkit内核
一:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
二:通过transform设置
注意:perspective属性必须在rotate属性之前才生效
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: perspective(150) rotateX(45deg);
-webkit-transform:perspective(150) rotateX(45deg); /* Safari and Chrome */
}
perspective透视设置的更多相关文章
- CSS3教程:Transform的perspective属性设置
1 2 <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...
- 10-THREE.JS perspective透视摄像机和orthographic正交摄像机区别
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- 立体透视 perspective transform-style 倾斜旋转
1.perspective 是设置镜头距离,距离越远视图越小,视图越近,视图越大.就像相机焦距一样.其只对子元素产生效果. 2.transform-style: preserve-3d 设置3d效果, ...
- 第99天:CSS3中透视perspective
CSS3中透视perspective 透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改 ...
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
- CSS3 Transform的perspective属性
以下两行语句有什么区别? Css <div id="animateTest" style="-webkit-transform: perspective(400px ...
- xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
系列目录 [已更新最新开发文章,点击查看详细] 在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...
- CSS3: perspective 3D属性
本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...
- CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
随机推荐
- Python学习札记(七) Basic4 条件判断
参考:条件判断 Note 1.Python的条件判断关键字与C语言类似,if.else,以及elif,相当于C语言中的else if. 2.Python与C语言不一样的是,使用缩进来判断语句是否属于条 ...
- Educational Codeforces Round 13 A、B、C、D
A. Johny Likes Numbers time limit per test 0.5 seconds memory limit per test 256 megabytes input sta ...
- Fedora安装opengl
Fedora和Ubuntu下安装OpenGL开发环境配置(我整理的)OpenGL开发库的详细介绍fedora23 安装OpenGL 开发OpenGL工程需要3个库文件和对应的头文件:libglut.s ...
- LNMP 如何安装mongodb ----lnmp一键安装包之后
mongodb 直接下载官方最新包解压就可以使用了. wget -c http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.4.tgz ta ...
- 明确出需求 然后开会评审 要什么接口 接口参数、返回json内容、格式 协定好 在做
明确出需求 然后开会评审 要什么接口 接口参数.返回json内容.格式 协定好 在做
- Markdown - 让网络书写变得简单
概述 宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所 ...
- lseek使用说明
lseek使用说明 表头文件#include<sys/types.h>#include<unistd.h> 定义函数off_t lseek(int filde,off_t of ...
- 用U盘安装ubuntu
用U盘安装操作系统,并不鲜见,对于Windows,可以用大白菜安装XP.Win7等,本质上是在U盘上安装一个小型的windows(WinPE),然后利用ghost一键还原技术,把U盘中的XP.gho( ...
- java的简单入门,tomcat服务器
Tomcat是一款开源的处理动态非常牛逼的web服务器.是sun公司开发的,在丧尸危机之后被收购了. 安装Tomcat需要的支持安装包 JDK下载:http://www.oracle.com/tech ...
- hystrix -hystrixCommand配置介绍
public @interface HystrixCommand { // HystrixCommand 命令所属的组的名称:默认注解方法类的名称 String groupKey() default ...