时间戳

首页 > 解决方案 > JQuery 转换 CSS 和无效的 CSS 属性

jquery - JQuery 转换 CSS 和无效的 CSS 属性

问题描述

我正在尝试创建一个里面有文字的甜甜圈。目前我正在尝试使用变换将每个元素放在圆圈周围的容器内，但输出的值无效并且不会出现 JQuery CSS 值。

这是一个小提琴 - https://jsfiddle.net/dm6owLp9/

预期的结果是将 atransform和 arotate和translate另一个rotate值应用于p将每个元素定位在甜甜圈周围的每个标签。

当前结果是没有transform值被应用于任何p标签。

在 JQuery 的第 37 行将其修改为：

'transform': 'rotate(' + rot * 1 + 'deg)'

是否将变换样式应用于每个元素，所以我认为主要问题在于第 37 行，但我不确定该行哪里出了问题。这样做console.log显示了在我看来是可接受的 CSS 值：

transform: rotate(96.66666666666667deg) translate(-335.83333333333337) rotate(-96.66666666666667deg);

如果我随后将该 CSS 值添加到p标签之一，浏览器检查器会将其报告为无效的 CSS 属性。

作为旁注，我使用 SCSS mixin 实现了这种效果，但是甜甜圈中的项目数量可能会有所不同，并且甜甜圈的大小需要扩大和缩小。

标签： jquerycss

解决方案

第 37 行需要PX添加到字符串以使翻译值有效。

'transform': 'rotate(' + rot * 1 + 'deg) translate(' + outerWidth / -2.4 + 'px' + ') rotate(' + rot * -1 + 'deg)'

推荐阅读