js 变量在css中使用

皮卡丘前端

于 2021-09-28 12:09:04 发布

阅读量392

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/qq_43613029/article/details/120526595

版权

博客探讨了如何在HTML中使用JS和CSS变量实现图片的动态旋转，并详细阐述了CSS中的transform属性与变量的结合使用，以及如何通过类名确保变量的作用域。内容涵盖了前端开发中的动态效果实现和CSS变量的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img
            ref="pictureImg"
            :src="biggerSrc"
            class="pictureImg"
            :style="{
              transform: `rotate(${deg}deg)`,
            }"
          />

html 中写

// css 中的旋转角度变量、宽度变量、高度变量
  private deg = 0;

js 中写

// 图片旋转
.pictureImg {
  transform: rotate(var(--deg));
  height: var(--height);
  width: var(--width);
}

css 中写

给它添加类名应该是为了保证变量的存在范围