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. linux备忘录-日志档案

    linux的日志档案 linux的日志档案记录系统或程序在运行过程中产生的一些信息,例如事件的记录,错误的记录等等.特别是在发生错误时,我们可以通过日志档案找到错误发生的根源,例如当我们无法启动邮件服 ...

  2. ubuntu中执行truffle build出现问题

    进行build之前,采用默认构建器方式创建客户端,先安装默认构建器: npm install truffle-default-builder --save 然后需要修改truffle.js配置文件如下 ...

  3. 【PHP】- include、require、include_once 和 require_once的区别

    1.include:会将指定的档案读入并且执行里面的程序.      被导入的档案中的程序代码都会被执行,而且这些程序在执行的时候会拥有和源文件中呼叫到 include() 函数的位置相同的变量范围( ...

  4. bzoj3011 可并堆

    我们可以遍历得出每个节点到根节点的距离h,然后用可并堆进行维护.树形dp 我用的是pairing heap #include<cstdio> #include<algorithm&g ...

  5. [bzoj 3224]手写treap

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3224 bzoj不能用time(0),看到这个博客才知道,我也RE了好几发…… #inclu ...

  6. ERROR: Found lingering reference file hdfs

    Found lingering reference异常 ERROR: Found lingering reference file hdfs://jiujiang1:9000/hbase/month_ ...

  7. Redis(1) 初识Redis

    redis介绍: Redis是一个开源(BSD许可)的内存数据结构存储,用作数据库,缓存和消息代理.它支持数据结构,如字符串(String),哈希(Hash),列表(List),集合(Set),具有范 ...

  8. windows 系统下git 的使用

    前言: 最新版本的git for windows也是有界面的,不再是以前的纯命令行操作,但是我习惯了乌龟,所以感觉还是直接用乌龟比较方便点~~ 前提,已安装以下: git for windows,未安 ...

  9. Sencha Touch2 -- 11.1：定义具有关联关系的模型

    在Sencha Touch2.0中,可以定义不同模型之间的关联关系.例如,在开发博客网站的时候,可以首先定义用户(User)模型,然后为用户定义文章(Article)模型.一个用户可以发表多篇文章,因 ...

  10. Spring 学习笔记（一）

    一.Spring 是什么? •Spring 是一个开源框架. •Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. • ...