CSS3 Perspective

一、在元素的父元素上使用

在父元素上使用Perspective属性可以使用透视投影视图，在父元素上加上：

perspective:400px

表示相机距离屏幕位置为400px。默认相机对准父元素的中心，要重设相机的焦点可以使用：

perspective-origin: 30% 70% 50%

表示相机的焦点在x轴（距原点）30%，y轴70%,z轴50%处。

二、在元素上使用

在元素上使用perspective属性可以达到正交投影视图效果。在元素上加上：

transform: perspective(400px)

三、不使用perspective，用2D变换实现伪3D效果

在屏幕上所谓3D效果本质上还是2D效果，只不过这种2D效果通过消隐和明暗处理，投射到屏幕上，看起来像是真的有一个物体存在一样。

所以，对于一些简单的3D动画，只有有限的状态，其实可以使用2D的变换去实现，以减少编程的困难。

比如下面这种，点击后延切线方向旋转90度的效果：

demo

如果要3D来做，可以用perspective实现正交投影，然后用3D旋转来实现，遗憾的是，我一下午都没旋转正确。用2D实现起来就很简单，看代码

CSS3 Perspective相关推荐

CSS3 perspective属性
perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定. 三维元素在观察 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
html 3d坐标,CSS3三维变形，transform，3D，视角知识
CSS3-3D相关知识详解-视角以及变形方向 HTML5学堂:视角以及变形方向.HTML5中非常不错的一个变革,便是将特效从二维平面上的变化,推进到了三维立体当中.而实现这个的功能就是CSS3!对于三 ...
css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
css3橙色球形_CSS3橙色的星球绕轨道公转动画_html/css_WEB-ITnose -
适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等新版浏览器. 来源:何问起原文特效转自:http://hovertree.com/h/bjaf/css3xin ...
HTML5与CSS3实现动态网页（笔记）
打开新页 HTML5与CSS3实现动态网页(学习笔记) 结构标签 article:标记定义一篇文章 header:标记定义一个页面后者一个区域的头部 nav:标记定义导航链接 section:标记定义 ...
【css】CSS3有哪些新特性
文章目录前言 1.css3边框--圆角效果 border-radius 2.css3边框--边框阴影 box-shadow 3.css3边框--边框图片 border-image 4.css3颜色- ...
理解！！！perspective 和 perspective-origin 属性的作用和效果
CSS3 perspective & perspective-origin perspective 属性:定义一个透视距离,实现透视效果 perspective 属性是 CSS3 新增的特性, ...
web 前端学习线路图
web 前端学习线路图一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...

CSS3 Perspective

一、在元素的父元素上使用

二、在元素上使用

三、不使用perspective，用2D变换实现伪3D效果

CSS3 Perspective相关推荐

最新文章

热门文章

CSS3 Perspective

一 、在元素的父元素上使用

二、在元素上使用

三、不使用perspective，用2D变换实现伪3D效果

CSS3 Perspective相关推荐

最新文章

热门文章

一、在元素的父元素上使用