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. HDU 4757 Tree（可持久化字典树）（2013 ACM/ICPC Asia Regional Nanjing Online）

    Problem Description   Zero and One are good friends who always have fun with each other. This time, ...

  2. 【转】 The user specified as a definer ('root'@'') does not exist when using LOCK TALBE

    在linux下,用mysql的导出语句: mysqldump -u root -pPasswd table >/home/lsf/test.sql 出现了 Got error: 1449: Th ...

  3. 使用ZSetOperations（有序）操作redis

    方法 c参数 s说明 Boolean add(K key, V value, double score); K key:集合key V value:key对应的值 double score:分数  向 ...

  4. lintcode-98-链表排序

    98-链表排序 在 O(n log n) 时间复杂度和常数级的空间复杂度下给链表排序. 样例 给出 1->3->2->null,给它排序变成 1->2->3->nu ...

  5. linux mysql 链接数太小

    Data source rejected establishment of connection,  message from server: "Too many connections&q ...

  6. P2671 求和

    题目描述 一条狭长的纸带被均匀划分出了 nn 个格子,格子编号从 11 到 nn .每个格子上都染了一种颜色 color\_icolor_i 用 [1,m][1,m] 当中的一个整数表示),并且写了一 ...

  7. [BZOJ4920][Lydsy六月月赛]薄饼切割

    [BZOJ4920][Lydsy六月月赛]薄饼切割 试题描述 有一天,tangjz 送给了 quailty 一张薄饼,tangjz 将它放在了水平桌面上,从上面看下去,薄饼形成了一个 \(H \tim ...

  8. [CF1031E]Triple Flips

    题目大意:给你一个长度为$n$的$01$串,一次操作定义为:选取$3$个等距的元素,使其$0$变$1$,$1$变$0$,要求在$\Big\lfloor \dfrac n 3\Big\rfloor+12 ...

  9. BZOJ2729 [HNOI2012]排队 【高精 + 组合数学】

    题目链接 BZOJ2729 题解 高考数学题... 我们先把老师看做男生,女生插空站 如果两个老师相邻,我们把他们看做一个男生,女生插空站 对于\(n\)个男生\(m\)个女生的方案数: \[n!m! ...

  10. bzoj 1977 洛谷P4180 严格次小生成树

    Description: 给定一张N个节点M条边的无向图,求该图的严格次小生成树.设最小生成树边权之和为sum,那么严格次小生成树就是边权之和大于sum的最小的一个 Input: 第一行包含两个整数N ...