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. 【iOS开发】iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 10, 110, 150)]; label.backgroundColor ...

  2. Solr的搭建和部署

    1.概述 简介 Solr,全称Search On Lucene Replication.一个开源的搜索服务器,对外提供类似于WebService的API接口. 用户可以通过http请求,向搜索引擎服务 ...

  3. java-2018-01-17计划

    1.一句英语 包括单词 2.一个java版本的设计模式 参考:https://github.com/iluwatar/java-design-patterns 学习了抽象工厂模式 总结:java的RS ...

  4. 【log4net】- 日志使用教程

    一.log4net简介: 1. Log4net的优点: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的 ...

  5. 算法(10)Subarray Sum Equals K

    题目:在数组中找到一个子数组,让子数组的和是k. 思路:先发发牢骚,这两天做题是卡到不行哇,前一个题折腾了三天,这个题上午又被卡住,一气之下,中午睡觉,下午去了趟公司,竟然把namespace和cgr ...

  6. php 文件上传失败

    使用OSX系统,在使用MAMP Pro作为虚拟服务器,并使用PHP作为后端语言进行文件上传,从临时文件夹拷贝文件的方法为 move_uploaded_file 代码如下: if($_FILES['fi ...

  7. 对Web作用域变量进行迭代

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ pa ...

  8. Android中有哪些好的开发框架？

    在安卓开发中,框架的使用必不可少,合理利用一些好的开发框架,往往可以达到事半功倍的效果.本文小编就将和大家分享安卓开发者不得不知的5款框架,一起来看看吧,新技能get走起~~ 1.thinkAndro ...

  9. bzoj 1201[HNOI2005]数三角形 1202 [HNOI2005]狡猾的商人 暴力 权值并查集

    [HNOI2005]数三角形 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 349  Solved: 234[Submit][Status][Disc ...

  10. namenode磁盘满引发recover edits文件报错

    前段时间公司hadoop集群宕机,发现是namenode磁盘满了, 清理出部分空间后,重启集群时,重启失败. 又发现集群Secondary namenode 服务也恰恰坏掉,导致所有的操作log持续写 ...