CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文。想看更详细 更专业的剖析请看张鑫旭的博文。
昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了半天没看出任何效果,于是开始百度... ...
度了半天发现perspective这玩意是做3D效果的,但为甚我做demo楞没看出perspective加上去有任何3D。拜读过 张鑫旭 的博文后才了解perspective是透视(学美术,建筑的肯定懂,不懂得我也解释的不专业,个人理解为景深)。既然perspective是透视,从理解上说就应该用在场景样式上,场景有了透视元素就能做3D特效了。
先来看看perspective的作用
CSS代码
.box{
border:solid 1px #000;
box-sizing:content-box;
margin:100px auto;
width:1000px;
height:300px;
/* 重点看这里 */
perspective:800px;
}
.child{
box-sizing:content-box;
width:300px;
height:300px;
float:left;
margin-left:5px;
background-color:#87D30A;
/* 重点看这里 */
transform:rotateY(95deg);
}
HTML代码
<div class="box">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div style="clear:both;"></div>
</div>
从这个demo看box父元素上有perspective,child子元素Y轴旋转95度。从效果看可以想象这三个div的透视可以有一个交点,且这个交点看起来在第二个div附近。
接着,尝试调整perspective的值,从原来的800px调整到4000px,也就是原来的5倍。其他属性不变,看看效果。
调整了perspective后发现div旋转幅度变大了,且透视焦点转移到了第一个div附近。通过这个调整发现,改变perspective的值透视焦点会发生改变。
.box{
border:solid 1px #000;
box-sizing:content-box;
margin:100px auto;
width:900px;
height:300px;
/* 重点看这里 */
perspective:800px;
transition:all 1.5s;
}
.box:hover{
/* 重点看这里 */
perspective:5px;
}
.child{
box-sizing:content-box;
width:300px;
height:300px;
float:left;
background-color:#87D30A;
/* 重点看这里 */
transform:rotateY(110deg) translateX(150px);
}
通过这个demo可以证实perspective的值影响透视焦点的位置。
借一张图
这就是3D世界的坐标图。而perspective在Z轴上,而perspective是设置Z轴的长度。在css3中只有设置了perspective的值元素才会有Z轴,perspective为none元素则没有Z轴(就是2D元素)。
rotateZ:div围绕Z轴旋转,以div中心点为轴心旋转
rotateX:div围绕X轴旋转,以div横向中轴为轴心前后翻转
rotateY:div围绕Y轴旋转,以div纵向中轴为轴心左右翻转
rotate的三个值找到了3D坐标,接下来找找perspective透视焦点。
(待续... ...)
CSS3打造3D效果——perspective transform的深度剖析的更多相关文章
- CSS3之3D效果中的transform运用
css3中添加了很多新的标签 属性 描述 css transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的位置. 3 transform-s ...
- 吃透css3之3d属性--perspective和transform
本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- 「CSS3 」3D效果 & 透视
CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
随机推荐
- Linux 发行版本及其基于
Independent ---> Debian Debian/Ubuntu(LTS) ---> Linux Mint ---> Linux Lite Debian/Ubuntu -- ...
- js隐式转换
JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object.object是引用类型,其它的五种是基本类型或者是原始类型.我们可 ...
- (转)如何将本地git仓库上传到GitHub中托管+实践心得
Git——新手入门与上传项目到远程仓库GitHub(转) - Chen_s - 博客园http://www.cnblogs.com/Chenshuai7/p/5486278.html 注意的问题: 1 ...
- Linux上USB移植错误解决笔记
在内核目录下先配置支持USB设备,无论你是什么设备,这一步都是必须的,USB驱动和其他的驱动不同,它分为USB设备驱动,另外还有USB-Host主机控制器的驱动,配置如下: Device Driver ...
- sed tr 去除PATH中的重复项
最近发现由于自己不良的安装软件的习惯,shell的PATH路径包含了很多冗余的项.这里使用shell命令去除PATH的冗余项. export PATH=$(echo $PATH | sed 's/:/ ...
- rqt工具的使用
安装rqt工具sudo apt-get install ros-indigo-rqtsudo apt-get install ros-indigo-rqt-common-plugins或者rosdep ...
- uexGaodeMap插件Android接入指引
uexGaodeMap插件Android接入指引 高德地图插件是基于高德地图API封装的AppCan平台的插件模块.开发者集成及使用此插件,需要到高德开放平台为应用申请相应的APIKey,并将APIK ...
- Dynamics AX 2012 R2 业务系列-采购业务流程
在博文Dynamics AX R2 业务系列中,Reinhard对这个系列做了一个规划,下面我们就按照规划开始说业务吧. 国际惯例,从采购开始. 1.采购的主要职责 简单点说,采购的主要职责,是从供应 ...
- phpcms v9联动菜单的调用方法及get_linkage函数简单过程
{get_linkage($r['areaid'],1,' >> ',1)} 复制代码 当然这个 $r 也不是绝对的.要看你的loop 是如何写的. {loop $data $n $r} ...
- js 自带的 map() 方法
1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String 上使用 map 方法获取字符串中 ...