首页 >> HTML+CSS >> CSS个体转换属性

CSS个体转换属性

287865 2021-03-03 0
浏览次数282

CSS变换与CSS动画和CSS过渡一起出现在Web上,以在Web上添加视觉效果和动作。十多年来,这些技术一直是Web平台和Web开发人员工具包的主要内容。实际上,CSStransform属性自2008年7月iPhone OS 2.0发行以来就一直在Safari中发行。您可以从2007年10月找到一些有关WebKit最初支持的历史性文章,以及从2009年7月开始的另一个有关MacKit X Leopard中CSS转换的3D转换的文章。

现在,在CSS转换领域有一些新闻:Safari Technology Preview 117中默认启用了各个转换属性。这意味着,在火狐和Chrome金丝雀,你现在可以使用新的,和CSS属性来指定哪些迄今的功能特性,包括3D操作。translaterotatescaletransform

使用这些属性很简单,应该使Web开发人员有宾至如归的感觉。考虑以下两个等效示例:

div.transform-property {
transform: translate(100px, 100px) rotate(180deg) scale(2);
}

div.individual-properties {
translate: 100px 100px;
rotate: 180deg;
scale: 2;
}
但是,为什么要在这些属性上使用这些新属性transform?原因之一是方便,因为您可能认为编写起来要简单,scale: 2而不是transform: scale(2)要缩放一个元素。

但是我认为这里的主要吸引力在于,您现在可以自由选择自己认为合适的方式来组合各种变换属性。例如,您可以轻松地编写一个CSS类来使用该scale属性翻转元素,而不必担心您可能会覆盖其他与变换相关的属性:

.flipped {
scale: -1;
}
flipped即使-rotate或transform属性将旋转应用于元素,您的类也将正常工作。

动画转换时,此功能也很方便。假设您正在编写一个动画,该动画会在整个元素持续时间内按比例放大元素,但还要为该动画的后半部分应用旋转效果。使用transform。属性,您将不得不预先计算旋转开始和结束时缩放比例的中间值应该是什么:

@keyframes scale-and-rotate {
0% { transform: scale(1) }
50% { transform: scale(1.5) rotate(0deg) }
100% { transform: scale(2) rotate(180deg) }
}
尽管从外观上看这似乎没什么大不了的,但对那些关键帧进行任何进一步的更改都需要重新计算这些值。现在,考虑使用单独的变换属性编写的同一动画:

@keyframes scale-and-rotate {
0% { scale: 0 }
50% { rotate: 0deg }
100% { scale: 1; rotate: 180deg; }
}
您可以轻松更改关键帧并根据需要添加其他属性,让浏览器确定如何正确应用这些单独的变换属性。

但这还不是全部。在某些情况下,您希望将单独的动画同时应用于一个元素。您可以将这组关键帧分为两个不同的组,然后调整时间:

.animated {
/* Apply the scale keyframes for 1s and the rotate
keyframes for 500ms with a 500ms delay. */
animation: scale 1s, rotate 500ms 500ms;
}

@keyframes scale {
from { scale: 0 }
to { scale: 1 }
}

@keyframes rotate {
from { rotate: 0deg }
to { rotate: 180deg }
}
现在,应用于变换的关键帧不仅更易于编写,而且您可以通过合成多个变换动画来更好地将时间和关键帧分开。而且,如果您是经验丰富的CSS Animations开发人员,那么您将知道在考虑计时功能时,这有多重要。

此外,对新的单个转换属性进行动画处理仍保留与对transform属性进行动画处理一样的出色性能,因为这些属性支持硬件加速。

但是transform财产呢?它与这些新的单独变换属性有何关系?

首先,请记住,该transform属性支持未表示为单个变换属性的变换函数。有对不等价的CSS属性skew(),skewX()以及skewY()功能和无财产等同于matrix()功能。

但是,当您指定一些单独的转换属性以及该transform属性时,会发生什么?的CSS变换级别2规范解释了如何从个人转换属性和transform-origin和transform性质组成,以形成当前变换矩阵。总而言之,首先应用各个变换属性– translate,,rotate然后scale–,然后transform应用属性中的函数。

这意味着有一个清晰的模型可以同时使用这些单独的转换属性和该transform属性,以增强您在Web平台上转换内容的能力。

并且在开始使用这些新属性之前,重要的是,您知道如何检测它们的可用性并将其transform用作后备。在这里,该@supports规则将允许您执行所需的操作:

@supports (translate: 0) {
/* Individual transform properties are supported */
div {
translate: 100px 100px;
}
}

@supports not (translate: 0) {
/* Individual transform properties are NOT supported */
div {
transform: translate(100px, 100px);
}
}
我们鼓励您开始在项目中探索如何在Safari Technology Preview中使用这三个新属性,并在遇到意外问题时将错误报告归档在bugs.webkit.org上。您还可以向@webkit或@jonathandavis发送一条推文,以分享您对各个变换属性的想法。

全部评论:0