vue给元素设置css_使用CSS变换为您的网站元素设置动画

我们都被移动的物体和不寻常的方向所吸引。动画效果可用于改善用户界面或吸引用户注意项目的重要部分。

在这篇文章中，我将向您展示如何应用不同的转换来改善您网站的可用性和设计。

CSS转换

您可以使用CSS属性以多种不同方式对网站元素进行转换，从而为网站元素添加效果 transform。此属性允许您 使用各种变换函数旋转，缩放，移动和倾斜元素。您还可以在鼠标悬停或鼠标单击时触发这些转换。我将在以后的文章中介绍三维变换。

让我们看看每个转换属性函数。

规模

该 scale 函数允许您增加或减少元素的大小，即按元素缩放元素。

例如，因子 2 会将元素的大小转换为其原始大小的2倍。同样，因子 0.4 会将其大小转换为原始大小的0.4倍。

我们来拍摄尺寸为200 * 200的图像。

HTML

为图像分配了一个名为“element”的类。

为了使图像大1.5倍，我们将使用 属性的 scale 功能 transform。

CSS

.element:hover {-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-o-transform: scale(1.5);transform: scale(1.5);}

因为我们将1.5作为参数传递给scale 函数，所以上面的代码会将图像的宽度和高度都增加到原始图像的1.5倍 。请注意，该 transform 属性具有供应商前缀 -webkit-， -moz- 并且 -o-。这些是为了获得所有浏览器的最佳支持。

要使转换平滑，请使用该 transition 属性。

CSS

.element{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.element:hover {-webkit-transform: scale(1.5);-moz-transform: scale(1.5);-o-transform: scale(1.5);transform: scale(1.5);}

这种转换特性将使转换线性发生0.2秒。将鼠标悬停在下图中可查看此转换的实时演示。

更具体地说，您可以使用 scaleX 和 scaleY 值分别缩放元素的宽度和高度。

HTML

CSS

.scale1{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.scale1:hover {-webkit-transform: scaleX(1.2);-moz-transform: scaleX(1.2);-o-transform: scaleX(1.2);transform: scaleX(1.2);}.scale2{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.scale2:hover {-webkit-transform: scaleY(.8);-moz-transform: scaleY(.8);-o-transform: scaleY(.8);transform: scaleY(.8);}

在悬停在各个图像上时，具有类'scale1'的第一图像的宽度将增加到其原始宽度的1.2倍，并且具有类'scale2'的第二图像的高度将减小到其原始高度的0.8倍。尝试将鼠标悬停在以下图像上。

现在，考虑您希望将宽度增加到1.2倍并将高度同时降低到元素原始值的0.8倍的情况。为此，您必须为scale 以逗号分隔的函数提供两个值 。第一个值将缩放其宽度，第二个值将缩放其高度。

CSS

.element{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.element:hover {-webkit-transform: scale(1.2, .8);-moz-transform: scale(1.2, .8);-o-transform: scale(1.2, .8);transform: scale(1.2, .8);}

您还可以缩放其他CSS属性，如 填充 和 字体大小。

回转

这是该transform 物业的另一项功能 。使用此功能，您可以按任何方向旋转元素，无论您想要哪个方向。正值将顺时针旋转元素，负值将逆时针旋转。

让我们尝试将图像旋转一定角度，尽管您可以旋转几乎任何像 div，span，headings或paragraph这样的东西。 您也可以尝试旋转整个html体。听起来怪怪的？试一试吧。

HTML

CSS

/* first image */.rotate1{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.rotate1:hover {-webkit-transform: rotate(40deg);-moz-transform: rotate(40deg);-o-transform: rotate(40deg);transform: rotate(40deg);}/* second image */.rotate2{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.rotate2:hover {-webkit-transform: rotate(-40deg);-moz-transform: rotate(-40deg);-o-transform: rotate(-40deg);transform: rotate(-40deg);}

默认情况下，该 rotate 函数沿Z轴旋转元素。可以专门旋转沿X，Y的元素，并使用Z轴的功能 rotateX， rotateY 和 rotateZ 分别。我们来看看如何。

HTML

CSS

/* first image */.rotate1{-webkit-transition: transform 1s linear;-moz-transition: transform 1s linear;-o-transition: transform 1s linear;transition: transform 1s linear;}.rotate1:hover {-webkit-transform: rotateX(180deg);-moz-transform: rotateX(180deg);-o-transform: rotateX(180deg);transform: rotateX(180deg);}/* second image */.rotate2{-webkit-transition: transform 1s linear;-moz-transition: transform 1s linear;-o-transition: transform 1s linear;transition: transform 1s linear;}.rotate2:hover {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}/* third image */.rotate3{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.rotate3:hover {-webkit-transform: rotateZ(40deg);-moz-transform: rotateZ(40deg);-o-transform: rotateZ(40deg);transform: rotateZ(40deg);}

第一和第二表情分别沿X和Y轴旋转180度。第三个笑脸沿Z轴旋转40度，这也是默认的旋转轴。

您可以通过组合这些转换来创建许多新组合。现在，让我们转到另一个转换函数。

翻译

您可以使用该translate 功能在水平，垂直或任何其他方向上移动元素 。它只会改变应用它的元素的位置，而不会中断文档的正常流动。

translateX 用于水平移动元素。给出正值将使其向右移动并向左移动负值。 translateY 将在垂直方向移动您的元素。同样，正值会将其向下移动并向上移动负值。

HTML

CSS

/* first image */.translate1{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.translate1:hover {-webkit-transform: translateX(40px);-moz-transform: translateX(40px);-o-transform: translateX(40px);transform: translateX(40px);}/* second image */.rotate2{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.rotate2:hover {-webkit-transform: translateY(20px);-moz-transform: translateY(20px);-o-transform: translateY(20px);transform: translateY(20px);}

使用该translateX 函数将第一图像向右移动40px， 使用该translateY 值向下移动第二图像20px 。您也可以同时水平和垂直移动相同的元素。为此，您必须将两个参数传递translate 给以逗号分隔的 函数。第一个值将水平移动元素，而第二个值将垂直移动元素。

HTML

CSS

.translate1{-webkit-transition: transform .2s linear;-moz-transition: transform .2s linear;-o-transition: transform .2s linear;transition: transform .2s linear;}.translate1:hover {-webkit-transform: translate(40px,20px);-moz-transform: translate(40px,20px);-o-transform: translate(40px,20px);transform: translate(40px,20px);}

上图是跟随悬停的路径，其中最终位置向右40px，低于初始位置20px。

浏览器支持

除google之外的所有浏览器都支持此属性 。此外， IE 不支持 transform-style：preserve-3d 属性，因此阻止了3D转换元素的嵌套。

结论

如果适当应用，各种网站元素的位置和方向的微小动画转换可以为您的网站设计带来生命。这只是关于不同类型转换的介绍和基本用法的帖子。这些可用于创建非常惊人的效果和动画，我将在以后的帖子中继续介绍。

欢迎加评论区讨论。整理不易，祝给我收藏关注的大佬发大财emmm。