transfrom的出现让许多静态的东西动了起来，让网页更加具有生命力。

在transform属性中，transform-origin属性仅是其中之一，要彻底理解transform属性，这是不够的，必须的理解其他属性的应用。transform中transform-style和perspective相关属性的使用也是很重要的。

语法transform-style:flat | preserve 3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。（transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。）

关于transform的属性的更多相关文章

  1. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. 封装transform函数（设置和获取transform的属性和属性值）

    (function (w) { /** * 设置或者获取元素的transform属性值 * @param node 要设置的元素 * @param param 变换属性: translate\scal ...

  3. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  4. transform,transtion属性

    transform:变化类型,transtion变化方式

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. 【转】IOS屏幕旋转与View的transform属性之间的关系，比较底层

    iTouch,iPhone,iPad设置都是支持旋转的,如果我们的程序能够根据不同的方向做出不同的布局,体验会更好. 如何设置程序支持旋转呢,通常我们会在程序的info.plist中进行设置Suppo ...

  7. CSS3学习之 transform 属性

    CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  8. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

  9. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

随机推荐

  1. Hyperledger02

    docker 思想 模块化: 集装箱 标准化: 运输标准化, 存储方式标准化,API接口的标准化 安全性: 隔离 docker解决什么问题 devops 我这程序程序没问题啊 系统好卡.哪个程序死循环 ...

  2. Vue折腾记 - (2)写一个不大靠谱的面包屑组件

    先看效果图 我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了,不然又要去监听路由或者依赖状态去获取 这里写图片描述 疑惑解答: 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个 ...

  3. 学习shell script

    摘要:概述.script的编写.test命令.[]判断符号.默认变量($1...).if...then条件判断式. 一.概述 [什么是shell script] 针对shell所写的脚本,将多个命令汇 ...

  4. direct.h头文件(对目录操作)

    chdir()改变当前目录的函数原形:int chdir(const char *path)功能:把由path指定的目录改为当前目录.path参数中可以指定驱动器号,如“a:\\ddd”, 但只是改变 ...

  5. Reactor模式是什么（转载）

    一.Reactor模式是什么反应器设计模式(Reactor pattern)是一种为处理并发服务请求,并将请求提交到一个或者多个服务处理程序的事件设计模式.当客户端请求抵达后,服务处理程序使用多路分配 ...

  6. 个人作业4——alpha阶段个人总结(201521123103 吴雅娟)

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  7. PAT 甲级 1003 Emergency

    https://pintia.cn/problem-sets/994805342720868352/problems/994805523835109376 As an emergency rescue ...

  8. sessionStorage & URL Origin

    sessionStorage & URL Origin same origin https://developer.mozilla.org/en-US/docs/Web/API/Window/ ...

  9. BZOJ4602: [Sdoi2016]齿轮 DFS 逆元

    这道题就是一个DFS,有一篇奶牛题几乎一样.但是这道题卡精度. 这道题网上的另一篇题解是有问题的.取对数这种方法可以被轻松卡.比如1e18 与 (1e9-1)*(1e9+1)取对数根本无法保证不被卡精 ...

  10. cdh版本的zookeeper安装以及配置（伪分布式模式）

    需要的软件包:zookeeper-3.4.5-cdh5.3.6.tar.gz  1.将软件包上传到Linux系统指定目录下: /opt/softwares/cdh 2.解压到指定的目录:/opt/mo ...