如何在多个类中连接 html 转换？

Question

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

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

比如说，如果我想要一个由 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 回答，我只是不熟悉它。

Answer 1

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

请记住，值的来源并不重要。它们可以作为 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>

Answer 2

您可以查看 CSS var(--X) （请参阅片段演示下方的链接） 并且，将您打算的所有转换默认设置为 0 并更新它们通过类名：（使用前注意支持：https://caniuse.com/#feat=mdn-css_properties_custom-property_var and eventually a 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/--*

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

Fallback : https://drafts.csswg.org/css-variables/#example-abd63bac

Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue; that is, anything between the first comma and the end of the function is considered a fallback value.

如果支持来个问题，你可以看看：

如何在多个类中连接 html 转换？

How do I connect html transforms in multiple classes?

html

javascript

css

jquery

transform

如何在多个 类 中连接 html 转换？

How do I connect html transforms in multiple classes?

html

javascript

css

jquery

transform

如何在多个类中连接 html 转换？