整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS Transform

CSS Transform

SS 在您可以修改的内容方面非常强大，并且该transform属性是最通用和最强大的 CSS 属性之一。在本文中，我将介绍使用transform属性修改 CSS 元素的所有方法。

什么是变换属性？

CSS 中的transform属性只是一种您可以在一个属性中旋转、缩放、移动等元素的方式。由于这种灵活性，如果起初使用起来可能会令人困惑，但本文将消除所有这些困惑。

.class {
  transform: rotate(90deg) scale(2) translate(100px, 200px);
}

transform通过组合多个变换函数来获得所需的输出，因此为了理解transform您需要了解每个transform函数。

rotate

可能最容易理解的变换函数是rotate. 此函数采用单个参数，即旋转元素的角度。正值将导致顺时针旋转，负值将导致逆时针旋转。

.red {
  transform: rotate(10deg);
}
.green {
  transform: rotate(-45deg);
}
.blue {
  transform: rotate(.25turn);
}

正如您在上面的示例中看到的，我们使用deg和turn单位来定义我们的旋转。deg单位从 0 到 360，而turn单位从 0 到 1。

3D 旋转

rotateX您还可以使用、rotateY和rotateZ函数进行 3D 旋转。该rotateZ功能的工作原理与rotate.

rotateX将在水平轴上rotateY旋转一个元素，并将在垂直轴上旋转一个元素。这些可用于翻转元素。

.red {
  transform: rotateX(60deg);
}
.green {
  transform: rotateY(60deg);
}
.blue {
  transform: rotateX(.2turn) rotateY(.2turn);
}

如您所见，我们在 3D 空间中旋转元素，使其看起来被挤压。这种旋转实际上只在处理 3D 元素时才有用。

scale

scale是另一个很容易理解的函数。它可以采用一个或两个参数来确定元素大小的缩放比例。大于 1 的数字会使元素变大，而小于 1 的数字会缩小元素。

.red {
  transform: scale(1.25);
}
.green {
  transform: scale(.5);
}
.blue {
  transform: scale(1.25, .75);
}

当一个参数被传递给scale它时，它会根据传递的数字缩放 X 和 Y 轴相同的量。当两个值传递给scale第一个数字时，将缩放 X 轴，第二个数字将缩放 Y 轴。

此外，如果您愿意，可以使用scaleXandscaleY函数来缩放 X 或 Y 轴。这些函数采用一个参数并在相应轴上缩放元素。

3D 比例

就像rotate您可以在 3D 中缩放一样。为此，您将使用与 and 类似的函数scaleZ，但用于 Z 轴。这同样只对 3D 元素有用。scaleX``scaleY

translate

可能我最喜欢的转换元素的方法是使用translate函数。这个函数像scale函数一样接受一个或两个参数，并将根据提供的值移动一个元素。

.red {
  transform: translate(25px);
}
.green {
  transform: translate(-25px, 25px);
}
.blue {
  transform: translate(0, -25px);
}

透明的彩色箭头表示形状通常放置的位置，而不透明的箭头表示它们在平移后的位置。

你会注意到，当只有一个值被传递给它时，translate它只会影响 X 轴，因此元素向右移动 25 个像素，因为它是一个正值。

当将两个值传递给translate第一个值时，会在 X 轴上移动元素，而第二个值会影响 Y 轴的位置。这意味着绿色箭头向左移动 25 个像素，向下移动 25 个像素。正 Y 值将元素向下移动似乎令人困惑，因为我们通常认为正 Y 意味着向上，但在 Web 开发中，正 Y 值意味着元素在页面中向下移动。

最后，蓝色箭头向上移动了 25 个像素，因为第一个参数设置为 0，第二个参数设置为负 25 个像素。

就像 scale 一样，有一个translateX和translateY函数可以一次只在一个方向上移动一个元素。

百分比translate

该translate属性处理百分比的方式与几乎所有其他 CSS 属性不同，因为它基于元素的大小而不是其父级的大小。

.red {
  transform: translate(100%);
}

正如你所看到的，当我们用百分比平移时，我们将元素向右移动了其自身宽度的 100%。这对于通过将元素移动其自身宽度的 50% 或将元素彼此偏移其大小的百分比来使元素居中非常有用。

3D translate

您现在可能已经猜到了，但translate也可以在 3D 中使用。您可以使用translateZ仅修改 Z 轴的函数或translate3D类似 的函数translate，但接受第三个参数来在 Z 轴上移动元素。同样，这仅对 3D 元素有用。

偏斜

可能所有transform功能中最没用的是skew. 它允许您通过倾斜形状的边缘来拉伸形状。该skew函数接受一两个参数，就像translate.

.red {
  transform: skew(25deg);
}
.green {
  transform: skew(15deg, 25deg);
}
.blue {
  transform: skew(-15deg, -25deg);
}

如您所见，skew 属性在 X 和 Y 方向上拉伸了我们的形状。通过指定一个参数，我们只在 X 方向上倾斜，而如果我们传递两个属性，第一个在 X 方向上倾斜，第二个在 Y 方向上倾斜。

此外，就像translate您可以使用skewX和skewY在一个方向上倾斜元素而不影响其他方向一样。

3D 倾斜

不同的是，所有其他transform属性skew都没有任何 3D 版本。

组合变换

到目前为止，我们已经讨论了单独使用转换，但是如果您想使用多个转换怎么办？这实际上非常简单，因为您可以传递任意数量的函数transform。

.red {
  transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
  transform: rotate(-.5turn) translateX(-10%);
}
.blue {
  transform: scaleX(1.2) scaleY(.8);
}

组合转换变得困难的唯一时候是当您想要在不同的类中修改它们时。

.base-class {
  transform: scale(1.2) translateX(5px);
}
.big {
  transform: scale(2) translateX(5px);
}
.move {
  transform: scale(1.2) translateX(100px);
}
.big.move {
  transform: scale(2) translateX(100px);
}

由于transform是一个属性，您需要在修改的每个类之间复制所有值，transform因为如果您只是transform: scale(2)在.big类中写入，它将覆盖整个transform而不只是scale部分。幸运的是，我们可以巧妙地使用 CSS 变量来解决这个问题。

.base-class {
  transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
  --scale: 2;
}
.move {
  --translate-x: 100px;
}

如您所见，我们现在只更改 CSS 变量，而从未修改实际transform属性。

结论

总体而言，CSStransform非常有用，同时也非常易于理解。到目前为止，最难的部分transform是理解如何跨不同类组合多个变换，但在 CSS 变量的帮助下，这个问题是微不足道的。

ransform变形

transform在字面上就是变形、改变之意。

CSS3的transform主要包括rotate(旋转)、skew(扭曲)、scale(缩放)和translate(移动)以及matrix(矩形变形)。

rotate使用格式:(取值范围0-360, 单位deg)

rotate(10deg)

rotate(360deg)

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片转换演示</title>
<style type="text/css">
img{
    width:460px;
    height:480px;
    border-radius:50%;
    transition:1s;
}
/*
过渡到···deg,而不是过渡···deg
*/
img:hover{
    /*transform: rotate(45deg);*/
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/

    /*正数顺时针*/
    transform: rotate(45deg);/*z轴*/
    /*负数逆时针*/
    transform: rotate(-45deg);/*z轴*/

}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>

transform-origin: 设置旋转元素的基点位置

实例2: 旋转基点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
    height: 220px;
    display: block;
    margin: 100px auto;

    transition: 1s linear;

    /*我们的旋转基点默认是中心*/
    /*规定旋转基点的
    * ①方位名词left top bottom right center
    * ②px(注意坐标原点为左上角)
    * ③%(参考的是宽高)*/
    transform-origin: center center;
    transform-origin: right top;
    transform-origin: -300px 110px;
    transform-origin: 150px 110px;
    transform-origin: 50% 50%;
    transform-origin: 100% 100%;

}
body:hover>img{
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/
    transform: rotate(360deg);/*z轴*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

skew使用格式:(取值范围0-180, 单位deg)

skew(10deg,10deg)

skew(180deg,180deg)

实例: 斜切

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}

img:hover{
    transform: skewX(45deg);
    transform: skewX(-45deg);
    transform: skewY(45deg);
    transform: skewY(-45deg);

    /*skew(x轴斜切角度,y轴斜切角度)*/

    /*skew(x,y)同步动画*/
    /*transform: skew(45deg,45deg);*/


    /*现在x斜切基础之上再进行y斜切*/
    transform: skewX(45deg) skewY(45deg);
    transform: skewY(45deg) skewX(45deg);

}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

scale使用格式：

scale(0.2)

scale(2)

scale(2,3)

scale(0.5,2)

实例: 缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}
img:hover{
    transform: scale(1);/*本身*/
    transform: scale(2);/*扩大*/
    transform: scale(0.5);/*扩大*/
    transform: scale(-1);/*倒立*/
    transform: scale(-2);/*倒立放大2倍*/
    transform: scale(-0.5);/*倒立缩小1半*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

translate使用格式：

translate(10px)

translate(20px,20px)

translate(-25px,-25px)

实例: 平移

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
    width: 400px;
    display: block;
    margin: 100px auto;
    transition: 1s;
}

img:hover{
    transform: translateX(100px);
    transform: translateX(-100px);
    transform: translateY(100px);
    transform: translateY(-100px);
    transform: translate(100px,100px);


    /*%参考的是各自的宽和高*/
    transform: translateX(100%);
    transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

综合使用: 旋转、斜切、缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    margin: 100px auto;
    background-color: orange;

    transition: 1s;
}
div:hover{
    /*transform: rotate(360deg);
    transform: skew(45deg);*/

    /*综合使用*/
    transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3新增特性都不会对盒子模型产生影响, 盒子模型大概永远是由width/height+padding+border+marign组成

例

旋转 div 元素：

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
transform (2D)36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-9.03.2 -webkit-23.015.0 -webkit-10.5 -o-
transform (3D)36.012.0 -webkit-12.010.016.010.0 -moz-9.04.0 -webkit-

属性定义及使用说明

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

为了更好地理解Transform属性,请查看 在线实例.

默认值：none
继承：no
版本：CSS3
JavaScript 语法：object.style.transform="rotate(7deg)"

语法

transform: none|transform-functions;

值描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！


在线咨询
上一篇：JavaScript HTML DOM
下一篇：网易有道X6Pro、步步高V6、阿尔法蛋T20、科大

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 康平县 茂县 余庆县 铜陵县 新干县 鹿城区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服