CSS3transform属性详解

transform字面上就是变形，改变的意思。

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

2D Transform 方法

  1. translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
  2. rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
  3. scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

  4. matrix() 和2D变换方法合并成一个。
    matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

  5. skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
    skewX(<angle>);表示只在X轴(水平方向)倾斜。
    skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

下面我们一个个来介绍它们：

一、移动translate

1、translate(x,y)     定义 2D 转换，沿着 X 和 Y 轴移动元素。

如：translate : translate(100px,20px);

2、translateX(n)     定义 2D 转换，沿着 X 轴移动元素。

如：transform:translateX(100px);

3、translateY(n)     定义 2D 转换，沿着 Y 轴移动元素。

 如：transform:translateY(20px);

二、旋转rotate

rotate(angle)    定义 2D 旋转，在参数中规定角度。

如：transform:rotate(30deg);

三、缩放scale

注意：默认值是1，它的值放大是比1大，缩小比1小。

1、scale(x,y)  定义 2D 缩放转换，改变元素的宽度和高度。

如：transform:scale(2,1.5);

2、scaleX(n)  定义 2D 缩放转换，改变元素的宽度。

如：transform:scaleX(2):

3、scaleY(n)   定义 2D 缩放转换，改变元素的高度。

如：transform:scaleY(2):

四、扭曲skew

1、skew(x-angle,y-angle)  定义 2D 倾斜转换，沿着 X 和 Y 轴。

如：transform:skew(30deg,10deg);

2、skewX(angle)  定义 2D 倾斜转换，沿着 X 轴。

如：transform:skewX(30deg);

3、skewY(angle)  定义 2D 倾斜转换，沿着 Y 轴。

如：transform:skewY(10deg);

改变元素基点transform-origin

2D 转换元素能够改变元素 x 和 y 轴。

值 描述
x-axis

定义视图被置于 X 轴的何处。可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定义视图被置于 Y 轴的何处。可能的值：

  • top
  • center
  • bottom
  • length
  • %

3D 转换属性

属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

transform-style: flat|preserve-3d;   表示所有子元素在3D空间中呈现。

如：

perspective: number|none;   设置从何处查看一个元素的角度

如：perspective: 500;

3D Transform 方法

2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外。

（下面是我之前看的一个不错的例子，借过来分享到这。）

例如，下面一个包含两个变换函数的transform的效果（gif）：

如果交换这两个变换函数的顺序，是这样的效果：

可以看到，由于坐标系会随着每一次变换发生改变，因此不同顺序的情况下，元素最终的位置也不同。

CSS3 过渡

属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property

  • transition-duration

  • transition-timing-function

  • transition-delay

如：

<!DOCTYPE html>

<html>

<head>

<style>

.box{

　　width:100px;

　　height:100px;

　　background:red;

　　transition:width 2s;

　　-moz-transition:width 2s; /* Firefox 4 */

　　-webkit-transition:width 2s; /* Safari and Chrome */

　　-o-transition:width 2s; /* Opera */

}

.box:hover{

　　width:300px;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

效果就是这样的，它在宽度变成300px时会有一个过程，就是过渡。

 

今天的内容就是这些~~~

【CSS3 transform属性和过渡属性详解】的更多相关文章

  1. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

  2. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  3. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  4. springboot快速入门（二）——项目属性配置（日志详解）

    一.概述 application.properties就是springboot的属性配置文件 在使用spring boot过程中,可以发现项目中只需要极少的配置就能完成相应的功能,这归功于spring ...

  5. Java环境变量（Env）和系统属性（Property）详解

    环境变量Env 使用System.getenv()获取系统的所有环境变量的Map,注意它是一个UnmodifiableCollection,是一个只读视图 环境变量并不提供set方法,即没有Syste ...

  6. css3动画中的steps值详解

    css3的动画的animation-timing-function属性定义了动画的速度曲线,一般的速度曲线大家都知道,什么ease,linear,ease-in,ease-out,还有自定义贝塞尔曲线 ...

  7. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  8. 原生JS：全局属性、全局方法详解

    全局属性.全局方法 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5853342.html 首先普及几个我总结的非常实用又很基础的知识:(呵呵,仅 ...

  9. Python进阶之“属性（property）”详解

    Python中有一个被称为属性函数(property)的小概念,它可以做一些有用的事情.在这篇文章中,我们将看到如何能做以下几点: 将类方法转换为只读属性 重新实现一个属性的setter和getter ...

随机推荐

  1. Java之路上，让我们Stand Up Again

    在开始之前,先发表一下个人想法吧. 在读书的时候每天忙的不可开交,也就没有了所谓的自由,突然参加工作,传统的朝八晚五,标准的八小时工作制,每天都是两点一线,工作中涉及商业机密,公司的东西也不能带回家, ...

  2. 【java API基本实现】LinkedList

    LinkedList: package com.tn.arraylist; public class LinkedList { Node head=null; Node tail=null; int ...

  3. ubuntu16.04 查询ip,网关，dns信息

    用ifconfig命令只能查询ip,子网掩码信息,不能获取dns和网关信息 用下面命令即可查询 nmcli dev show

  4. eval基础，基础用法及解析json

    <body> <!-- eval 的使用:eval(string) 计算某个字符串,并执行其中的js代码 字符串上运用 eval() eval("x = 10;y = 2; ...

  5. python爬取大众点评

    拖了好久的代码 1.首先进入页面确定自己要抓取的数据(我们要抓取的是左侧分类栏-----包括美食.火锅)先爬取第一级分类(美食.婚纱摄影.电影),之后根据第一级链接爬取第二层(火锅).要注意第二级的p ...

  6. 小白的Python之路 day5 python模块详解及import本质

    一.定义 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能) 本质就是.py结尾的python文件(文件名:test.py,对应的模块名:test) 包:用来从逻辑上组织模块 ...

  7. longest valid parentheses方法归纳

    题目大意见leetcode,下面我稍微介绍下想到的三种方法: 方法一:不用栈去找匹配 建立一个数组l2表示匹配,然后i从0开始,看到 ( 就把l2对应的数值记为-1,直到看到 ),找到)以后,从当前i ...

  8. git强制push

    Git 如何强制push? $ git push -u origin master –f   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...

  9. Md2All

    微信公众号:颜家大少欢迎关注我,一起学习,一起进步!目前,知到 Md2All 的朋友还很少,如果你觉得有帮助,希望能告诉身边有需要的朋友. 谢谢! Md2All 简介 一个Markdown在线转换工具 ...

  10. TurnipBit口袋编程计算机：和孩子一起DIY许愿的流星

    听说对着流星许愿,许的愿望都会实现,虽然不知道这个说法是不是真的,但是流星还是很好看的,为了能一直看到流星,今天就自己做一个流星保存下来,想什么时候看,就什么时候看. 首先需要想象一下流星是什么样子的 ...