使用正则表达式解析 rotate3d 值的 CSS 变换

Question

我需要将 css 变换值分离到数组中，但将旋转值保持在一起。

例如：

'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'

需要

[
    'translate3d(20px, 5px, 10px)',
    'rotateX(20deg) rotateY(10deg) rotateZ(0deg)',
    'skew3d(20deg, 10deg)',
    'rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'
]

您可以假设旋转将始终按此顺序 rotateX(20deg) rotateY(10deg) rotateZ(0deg)。

如何在 javascript 中使用正则表达式执行此操作？谢谢！

Answer 1

假设旋转属性始终按顺序排列在一起，您可以使用以下正则表达式拆分字符串：/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/.

表达式 /\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/ 将匹配 \s 个字符，如果它们后跟 (?=\S+\(.*?\)) 个包含括号的字符。如果 \s 字符后跟 rotateY/rotateZ 和 (?!rotate(?:Y|Z)).

，它也会否定 \s 个字符

Example Here

var string = 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)';
var properties = string.split(/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/);

Returns:

[
    "translate3d(20px, 5px, 10px)",
    "rotateX(20deg) rotateY(10deg) rotateZ(0deg)",
    "skew3d(20deg, 10deg)",
    "rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)"
]

使用正则表达式解析 rotate3d 值的 CSS 变换

Parsing CSS transform for rotate3d values using regex

javascript

css

regex

css-transforms