如何使用CSS变换属性

从颜色和字体来网格布局和旋转木马CSS决定了你的网站的外观，以及你的访问者是否喜欢使用它。这就是为什么掌握这门语言是如此重要的原因，如果你有时间，还需要一个像这样的配套框架bob全站app引导CSS．

通过理解transform属性，您将找到进一步从头构建独特和引人入胜的界面的方法。因此，在这篇文章中，我将向你展示开始使用CSS transform属性所需要知道的一切，包括在二维和三维中操作元素的多种方法，甚至如何动画这样的效果。

CSS变换规则如下:

变换:值(参数);

…价值是类型的转换和论点表示应用变换的程度。注意，一些转换声明可以接受多个参数。

但是，如果没有转换属性的实际例子，这个解释就没有多大意义，所以让我们来探索一些。

2 d CSS转换

CSS转换可以分为两类:二维和三维。我们先来看看二维变换。二维CSS转换在X(水平)和Y(垂直)轴上操作。

在我的示例中，我将把转换效果应用到一个基本的方形div元素。蓝色div表示未转换的元素，橙色div显示应用了转换效果的相同元素。

CSS转换:翻译

的翻译()方法将页面元素在页面上向上、向下、向左和/或向右移动指定数量。在括号中，第一个数字指定水平距离，第二个数字指定垂直距离。

例如，我们可以将div转换为若干像素:

变换:翻译(100 px, 75 px);

您还可以使用百分比来指定翻译。百分比移动元素的水平/垂直距离与其设定的宽度/高度成比例:

变换:翻译(100%,50%);

除了翻译()，我们也有translateX ()和translateY ()方法。translateX ()只水平移动元素，并接受一个参数:

变换:translateX (100 px);

类似地,translateY ()方法垂直移动元素。它也只需要一个参数:

变换:translateY (100 px);

CSS转换:规模

的规模()方法更改目标元素的大小。如果我们提供一个参数，这将增加或减少div的原始大小的倍数:

变换:规模(2);

变换:规模(0.75);

如果提供两个参数(用逗号分隔)，第一个参数指定水平缩放，第二个参数指定垂直缩放:

变换:规模(4,2);

的scaleX ()方法只更改元素的水平缩放。它有一个参数:

变换:scaleX (2);

写入scaleY ()作用与scaleX (),但垂直:

变换:写入scaleY (2);

CSS转换:旋转

的旋转()函数，正如您可能猜到的，旋转一个元素。默认情况下，元素会围绕其中心旋转。我们可以指定旋转的角度，弧度，或旋转(从0转来1把)：

变换:旋转(45度);

变换:旋转(0.75);

CSS转换:斜

的斜()方法使元素沿X和/或Y轴倾斜。它的参数分别指定倾斜的水平和垂直角度。

变换:斜(50度,-15度);

skewX ()只在水平轴上倾斜div，并且skewY ()只在垂直轴上做同样的事情:

变换:skewX(50度);

变换:skewY(50度);

结合2D CSS转换

如果你想对同一个东西应用多个变换CSS选择器，不需要多个变换声明。相反，你可以将多个CSS转换值组合到一个声明中，只需在它们之间加一个空格:

Transform: translate(100px, 20px) scale(0.8) rotate(30deg);

3 d CSS转换

三维CSS转换包含了z轴。如果你把屏幕的宽度和高度分别想象成X轴和y轴，那么z轴就是屏幕的“深度”。

图片来源

这里有一些方法来转换你的元素来增加这种深度:

CSS转换:角度

的角度()value设置元素在z轴上的深度。它可以切换元素显示的“近”或“远”程度。角度()与其他3D转换方法一起使用，我们接下来将看到。

CSS变换:rotateX()和rotateY()

就像旋转(),rotateX ()和rotateY ()values旋转我们的div，但“围绕”X轴和y轴:

变换:rotateX(130度);

变换:rotateY(130度);

当这些方法与角度()，旋转后的元素似乎朝我们旋转:

/*第一个图像*/

变换:角度(500 px) rotateY(40度);

/*第二个图像*/

变换:角度(500 px) rotateY(60度);

/*第三个图像*/

变换:角度(500 px) rotateY(80度);

translateZ ()

一起使用时角度(),translateZ ()创建元素在z轴上向前或向后移动的效果:

transform: perspective(500px) translateZ(200px);

CSS transform-origin属性

transform-origin是另一个CSS属性，可以使用变换．的transform-origin属性更改原点的位置，即转换开始或基于的点。

最清楚地证明了这一点旋转()方法:我们可以使用transform-origin移动旋转中心点:

变换:旋转(45度);

transform-origin:左上角;

变换:旋转(45度);

transform-origin:左下角;

变换:旋转(45度);

transform-origin:中心吧;

原点也可以指定为与原始元素左上角的像素距离:

变换:旋转(45度);

transform-origin: 75 px 150 px;

CSS转换动画

到目前为止，我们所有的例子都是静态的……但我们可以做得更好。任何CSS转换方法都可以与CSS转换相结合来产生很酷的效果CSS动画效果．

例如，我们可以编写一个交互式徘徊按钮的规模()方法:

div {

过渡:变换0.5 s;

｝

div:{徘徊

变换:规模(1.1);

光标:指针;

｝

.．.或者产生一种类似风车的效果旋转()：

div {

过渡:变换2 s;

｝

div:{徘徊

变换:旋转(720度);

｝

让我们来回顾一下

我们已经讲了很多，所以让我们回顾一下我们学过的所有内容:

• 变换:一个CSS属性，用于改变页面元素的形状、位置和方向。它可以接受以下一个或多个值:
  • 翻译():移动页面上的一个元素
  • translateX ():在页面上水平移动一个元素
  • translateY ():在页面上垂直移动一个元素
  • translateZ ():沿着z轴移动一个元素，“朝向”或“远离”用户
  • 规模():增加/减少元素的大小
  • scaleX ():增加/减少元素的宽度
  • 写入scaleY ():增加/减少一个元素的高度
  • 旋转():旋转元素(默认围绕其中心)
  • rotateX ():沿x轴旋转元素
  • rotateY ():沿y轴旋转元素
  • 斜():扭曲元素的形状
  • skewX ():水平倾斜元素的形状
  • skewY ():垂直倾斜元素的形状
  • 角度():当与3D转换值一起使用时，给出一个元素向用户移动/远离用户的外观
• transform-origin: CSS属性变换改变变换的原点。
• 过渡:一个CSS属性，用来控制动画速度。它可以用在变换动画页面元素。

当你把这些强大的技术结合在一起时，你可以做很多事情——试验一下，看看你会得到什么!

记住，无论你实现了什么很酷的效果，确保它们最终服务于用户，增强了浏览体验，而不是分散用户的注意力。