CSS新特性(3D转换,perspective(透视),transfrom-style(子元素是否开启三维环境))
1. 三维坐标系(里面的值不能省略,没有就写 0 )
x 轴:水平向右 注意:x 右边是正值,左边是负值
y轴: 垂直向下 注意:y 下面是正值,上面是负值
z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
主要知识点:
3D位移:translate3d(x,y,z)
3D旋转:rotate3d(x,y,z)
透视:perspective
3D呈现 transfrom-style
2. 透视(perspective:写在被观察元素的父盒子上)
在 2D 平面产生近大远小视觉立体,但是只是效果二维的,如果想要 3D效果必须 设置透视
1. 如果想要在网页产生 3D 效果 需要透视(理解成 3D 物体投影在 2D 平面内)
2. 模拟人类的视觉位置,可认为安排一只眼睛去看
3. 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的在电脑平面成像越大,越远成像越小
5. 透视的单位是像素
注意:
透视写在被观察元素的父盒子上面
z 轴值越大,我们看到的物体就越大
3. 3D旋转(rotate3d)
语法:
transform:rotateX(45deg); // 沿着 x 轴 正方向旋转 45deg
transform:rotateY(45deg); // 沿着 y 轴正方向旋转 45 deg
transform:rotateZ(45deg); // 沿着 z 轴正方向旋转 45 deg
transform:rotate3d(x,y,z,deg); // 沿着自定义轴旋转 deg 为角度(了解即可)
左手准则(X 轴):左手的大拇指指向(比赞的手势,大拇指指向右) x 轴的正方向,其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
左手准则(Y 轴):左手的大拇指指向(比赞的手势,大拇指指向下) y 轴的正方向,其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向
3D旋转 rotate3d
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转 deg 为角度,x y z 表示旋转轴的矢量,是标识是否沿该轴旋转,最后一个标示旋转的角度
transform:rotate3d(1,0,0,45deg); // 就是沿着 x 轴旋转45deg
transform:rotate3d(1,1,0,45deg); // 就是沿着对角线旋转45deg
4. 3D 呈现 transfrom-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3d立体空间 (默认)
transform-style:preserve-3d;子元素开启立体空间
代码写给父级,但是影响的是子盒子
CSS新特性(3D转换,perspective(透视),transfrom-style(子元素是否开启三维环境))的更多相关文章
- CSS新特性之3D转换
1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- CSS新特性contain,控制页面的重绘与重排
在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...
- CSS新特性之动画
动画是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或者一组动画,常常用来实现复杂的动画效果.相比较过度,动画可以实现更多变化,更多控制,连续自动(不需要鼠标经过和鼠标离开来控制) ...
- css新特性 box-flex/flex 弹性盒状模型
新接触的,可是我的张大神早在2010年就写了box,box-flex的用法 大神把box-flex用狗血电视剧分家产剧情比喻,生动形象地说明,让我理解得容易了些,唉大神好贴心,举例说明满分 ----- ...
- CSS选择器的组合选择器之后代选择器和子元素选择器
实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 【译】2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
随机推荐
- go语言从例子开始之Example10.map(字典)
map 是 Go 内置关联数据类型(在一些其他的语言中称为哈希 或者字典 ) package main import "fmt" func main() { 要创建一个空 map, ...
- function的各做写法
function(){}()让变量快速初始化结果 var timestamp = function(){ var timestamp = Date.parse(new Date()); return ...
- spring boot poi 导出Excel
public class ExcelData implements Serializable { private static final long serialVersionUID = 444401 ...
- linux(一)vi和vim
vi 多模式文本编辑器 多模式产生的原因 四种模式 正常模式 插入模式 命令模式 可视模式 vi man vi vim vim正常模式 直接vim回车,或vim空格文件名回车 i进入插入模式 I(sh ...
- QUIC协议学习记录
QUIC(Quick UDP Internet Connections,快速UDP互联网连接)是Google提出的一种基于UDP改进的通信协议,其目的是降低网络通信的延迟,提供更好的用户互动体验. Q ...
- 阿里HBase高可用8年“抗战”回忆录
2017年开始阿里HBase走向公有云,我们有计划的在逐步将阿里内部的高可用技术提供给外部客户,目前已经上线了同城主备,将作为我们后续高可用能力发展的一个基础平台.本文分四个部分回顾阿里HBase在高 ...
- 服务化改造的云上利器 | 阿里云 EDAS 重大升级发布
11月22日,广东云栖大会企业级互联网架构专场上,阿里云发布了全新版本的企业级分布式应用服务EDAS. 新版本增强了对主流微服务框架的原生支持,实现SpringCloud & Dubbo用户代 ...
- bzoj 2015
http://www.lydsy.com/JudgeOnline/problem.php?id=2015 裸最短路(' ' ) 不过我最初以为是mst (' ' ) #include & ...
- PHP disk_free_space() 函数
定义和用法 disk_free_space() 函数返回指定目录的可用空间,以字节为单位. 语法 disk_free_space(directory) 参数 描述 directory 必需.规定要检查 ...
- IP地址的定义和划分
IP地址分类: IP地址根据首首字节开始位可以分为5大类: 分类 首字节开始位 首字节数字范围 ...