一、transform变换

  可做拉伸、压缩、旋转、偏移的效果。需加各个浏览器前缀。

二、transform-origin

  为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标轴原点,向右为x轴,向下为y轴,基点为(50%,50%)。

  1. transform-origin:x y z;

    1)x轴 取值:left/center/right/length/%

      百分比换算:

            left-------------0%

            center----------50%

            right------------100%

    2)y轴 取值:top/center/bottom/length/%

      百分比换算:

            top--------------0%

            center----------50%

            right------------100%

    3)z轴 取值:length

      2D默认为0,3D效果设置。

三、transform的属性值

  1.旋转 rotate(deg)

    通过指定的角度参数对元素以基点进行2D旋转。单位为deg。

  2.移动 translate(x,y)

    始终相对于元素中心偏移。单位为px。

    translateX(x);水平方向上的偏移量

    translateY(y);垂直方向上的偏移量

  3.缩放 scale(x,y)

    当值=1为原大小;值>1为放大;值<1为缩小。单位无。

    scaleX(x);水平方向上的缩放

    scaleY(y);垂直方向上的缩放

  4.倾斜 skew(x,y)

    给选定的元素进行以基点为中心的倾斜。单位为deg。

    skewX(x);水平方向上的倾斜

    skewY(y);垂直方向上的倾斜

  5.矩阵 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)

    矩阵一共有6个参数。

css3 变换 transform(2D)的更多相关文章

  1. css3 变换、过渡效果、动画

    1 CSS3 选择器 1.1 基本选择器 1.2 层级 空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...

  2. 好吧,CSS3 3D transform变换,不过如此!

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  3. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...

  4. 好吧,CSS3 3D transform变换,不过如此!——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

    通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...

  7. 关于CSS3中transform变换的小坑

    2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...

  8. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  9. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. 数据库MySQL安装和校验

    1.安装MySQL 双击已经下载的安装包: Typical:典型安装,第一次安装建议选择该类安装 Custom:自定义安装,在对数据库熟悉后,知道自己需要哪些组件时,可以选择该类安装(这里选择的是自定 ...

  2. Java常用集合体系以及相互区别

    Collection集合特点: 1.2.1一些 collection 允许有重复的元素,而另一些则不允许 1.2.2一些 collection 是有序的,而另一些则是无序的 [有序是指与添加的顺序一致 ...

  3. Coursera 机器学习笔记(六)

    主要为第八周内容:聚类(Clustering).降维 聚类是非监督学习中的重要的一类算法.相比之前监督学习中的有标签数据,非监督学习中的是无标签数据.非监督学习的任务是对这些无标签数据根据特征找到内在 ...

  4. JavaScript设计模式_02_策略模式

    在程序设计中,我们常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. /* * pre:策略模式 * 示例:公司计算奖 ...

  5. CentOS 7 for ARM 安装一键Lnmp失败

    背景 前面把树莓派装上了CentOS 7,趁着国庆放假回来赶紧把服务端环境搭起来,为了方便就准备用一键lnmp快速部署一个,结果死活安装不成功... 报错 按照以往的经验进行安装,在我的小树莓派上安装 ...

  6. Java虚拟机14:Java对象大小、对象内存布局及锁状态变化

    一个对象占多少字节? 关于对象的大小,对于C/C++来说,都是有sizeof函数可以直接获取的,但是Java似乎没有这样的方法.不过还好,在JDK1.5之后引入了Instrumentation类,这个 ...

  7. 前端的3D(css3版本)

    其实是依托Css3的功劳,先上一个例子 代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transfor ...

  8. Bash中单引号和双引号的区别

    单引号和双引号的区别 单引号:必须成对使用,它可以保护所有的字符不被翻译.如变量$1,和奇数个单引号的作用相同,偶数个单引号=1个双引号双引号:必须成对出现,它可以保护一些元字符不被翻译,但允许变量和 ...

  9. mysql+keepalived 双主热备高可用

    理论介绍:我们通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.MySQL双主复制,即互 ...

  10. 连接SQL SERVER数据库实例出错

    问题背景: 刚买的新电脑,昨天让公司IT部装了win10专业版系统,想体验一下.装完后一切正常,晚上带回家装自己需要的软件和系统更新,结果今天来公司发现数据库实例连不上了,拿到IT部,他们也没有找到原 ...