如何在多个类中连接 html 转换？ [复制]

Posted 2023-03-06

【中文标题】如何在多个类中连接 html 转换？ [复制]

【英文标题】：How do I connect html transforms in multiple classes? [duplicate]

【发布时间】：2020-08-16 18:32:37

【问题描述】：

我正在尝试在单个元素中使用多个转换，以便最终产品是所有一起应用的转换的组合。

但是，当有多个时，唯一的一个变换属性将被忽略。

说，如果我想要一个由rotate(20deg) 和skewY(20deg) 转换的 div，这是行不通的：

.foo 
  transform: rotate(20deg);


.bar 
  transform: skewY(20deg);

<div class="foo bar"></div>

只会应用一个。尽管复合转换可能有效，但它是不切实际的，因为转换可能有许多组合。而不是这样做：

.one-one transform: rotate(10deg) skewY(1deg);
.one-two transform: rotate(10deg) skewY(2deg);
.one-three transform: rotate(10deg) skewY(3deg);
.one-four transform: rotate(10deg) skewY(4deg);
.two-one etc.

我想这样做，以便我可以在button 点击时应用转换，而不是用尽所有可能的转换组合：

.one transform: rotate(10deg);
.two transform: rotate(20deg);
.three transform: rotate(30deg);
.four transform: rotate(40deg);

.uno transform: skewY(10deg);
.dos transform: skewY(20deg);
.tres transform: skewY(30deg);

我认为目前可行的解决方案：

有一种方法可以添加到<div> 的变换属性中 以某种方式modify classes 使用 jQuery 更改 CSS，但似乎这也会用 css() 覆盖属性，而不是添加到 transform 样式

我更喜欢 css/js 解决方案，但也欢迎 jQuery 答案，我只是不熟悉它。

【问题讨论】：

来自副本：***.com/a/61433630/8620333

【参考方案1】：

您可以查看 CSS var(--X) （请参阅 sn-p 的演示下方的链接），然后将您打算的所有转换默认设置为 0 并通过 className 更新它们：（请注意使用前支持：https://caniuse.com/#feat=mdn-css_properties_custom-property_var 和最终的 polyfill https://github.com/nuxodin/ie11CustomProperties)

没有 javascript https://codepen.io/gc-nomade/pen/RwWLOWr 的可能示例：

.foo 
  --rotate: 20deg;


.bar 
  --skewY: 20deg;


div[class] 
  transform: rotate( var(--rotate, 0)) skewY( var(--skewY, 0));/* fallback value is here 0 */



/* demo purpose */

div[class] 
  float: left;
  border: solid;


html 
  display: flex;
  height: 100%;


body 
  margin: auto;

<div class="foo bar">foo bar</div>
<div class="foo ">foo</div>
<div class="bar">bar</div>
<div class="nop">no transform</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

以-- 为前缀的属性名称，如--example-name，表示包含可在其他声明中使用var() 函数的值的自定义属性。

自定义属性的范围仅限于声明它们的元素，并参与级联：此类自定义属性的值是由级联算法决定的声明的值。

后备：https://drafts.csswg.org/css-variables/#example-abd63bac

注意：回退的语法与自定义属性的语法一样，允许使用逗号。例如，var(--foo, red, blue) 定义了红色、蓝色的后备；也就是说，第一个逗号和函数末尾之间的任何内容都被视为后备值。

如果支持来个问题，你可以看看：IE11 - does a polyfill / script exist for CSS variables?

【讨论】：

这是我正在研究的东西。但是 man 浏览器支持很差。但是，如果不考虑浏览器支持，这绝对是最短的解决方案。

@MosiaThabo 歌剧和老版本的 IE 确实在这里很麻烦 ;) JavascRipt 也需要注意这些 ;)

大声笑...正是@G-Cyrillus 我刚刚在上面使用了javascript。只是为了说明他如何解决这个问题。由他来决定如何设置/获取倾斜和旋转的值

@MosiaThabo 我更多的是考虑使用 polyfill 以使其易于在样式表中使用；）例如 github.com/nuxodin/ie11CustomProperties

@MosiaThabo 这里是您的解决方案：***.com/questions/46429937/… ;)

【参考方案2】：

有很多方法可以解决这个问题。下面这个怎么样？ 我创建了两个 ` 来读取倾斜和旋转的值，然后它们会应用效果。

请记住，值的来源并不重要。它们可以在您的按钮中硬编码为data-* 属性（如果您想修复它们）。这只是为了向您展示如何使用 javascript 来处理它（我添加了一些建议以使其更易于理解）：

var object = document.querySelector(".shape");

// this function takes care of Rotational effect
function rotate(event)

  var rotation_val = document.getElementById("rotationVal").value;
  
  // this get's the css transform expression for rotation which is 
  // stored as data-attribute on every button, because it tells you what button is resposible for what transformation. But you can store this anywhere you want.
  var css_transform = event.currentTarget.getAttribute("data-rotation");
  
  // this here just replaces say rotate(_r_) to rotate(15deg) if val was 15
  var effect = css_transform.replace("_r_",rotation_val + "deg");
  
  // Take not of this. ere I am not overriding the transform property. Instead
  // I am adding a transformation to it. more like compounding but dynamically.
  object.style.transform += effect;


// this function takes care of Skewing effect
function skewY(event)

  var skew_val = document.getElementById("skewVal").value;
  var css_transform = event.currentTarget.getAttribute("data-skew");
  var effect = css_transform.replace("_s_",skew_val + "deg");
  object.style.transform += effect;


function apply_all()
  var buttons = document.querySelectorAll(".effect_button");
  
  buttons.forEach( function(button)
    button.click();
  );

.container
  padding: 60px;
  border: thin solid #dbdbdb;


.shape
  width: 60px;
  height: 60px;
  background-color: green;

<div class="container">
  <div class="shape">
  </div>
</div>

<input id="rotationVal" />
<button class="effect_button" data-rotation="rotate(_r_)" onClick="rotate(event)">rotate</button>
<br />
<input id="skewVal" />
<button class="effect_button" data-skew="skewY(_s_)" onClick="skewY(event)">Skew</button>
<br />

Or Rotate and Skew at the same time:
<button onClick="apply_all(event)">Transform</button>