8

我知道设置变换的方法，但我想设置旋转并保留其他值，例如缩放和倾斜。

也许，我们可以写一个函数：

// A variable of element, not parameter. separate out it make more clear.
var el = document.getElementById('el');
function setTransform (p_name, p_value) {
  // how to write some code to set the el transform style...
}

此外，我有一个元素：

<div id="el" style="transform: rotate(45deg) skew(45deg);"></div>

对我们来说，我们的函数 setTransform：

setTransform('rotate', '30deg');

我希望元素是这样的：

<div id="el" style="transform: rotate(30deg) skew(45deg);"></div>

所以我的问题是如何编写函数setTransform的内容？

4

3 回答 3

20

注意：您应该使用 skewX 和/或 skewY 而不是 skew。在此处查看MDN 信息。

跟踪变量中的转换会更容易：

var elRot,    // the rotation 'counter' for the element 'el'
    elScale,  // the scale 'counter' for the element 'el'
    elSkewX,  // the skewX 'counter' for the element 'el'
    elSkewY;  // the skewY 'counter' for the element 'el'

// initialize values
elRot = 0;
elScale = 1;
elSkewX = 0;
elSkewY = 0;

或一个对象：

var elTranform = {
    rot: 0,   // the rotation 'counter' for the element 'el'
    sca: 1,   // the scale 'counter' for the element 'el'
    skx: 0,   // the skewX 'counter' for the element 'el'
    sky: 0    // the skewY 'counter' for the element 'el'
};

所以现在您可以从函数开始（您仍将使用 var el 作为元素），第一步是获取值，因此您可以更改为函数提供的参数：

// use this with separate vars
function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // how to write some code to set the el transform style...
}

// use this with the object
function setTransform (element, elTransformArg) {
    // how to write some code to set the el transform style...
}

接下来，您重新指定“停留”的任何其他变换，在您给出的示例中，skewX 保持 45 度：

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    // the brackets cause the string to be evaluated before being assigned
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

或者

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate() scale() skewX() skewY()");
}

现在您必须将参数放入字符串中：

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    element.style.transform = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
}

或者

function setTransform (element, elTransformArg) {
    element.style.transform = ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
}

有点乱，所以把那个字符串放在一个变量中（这对前缀有好处）：

function setTransform (element, rotationArg, scaleArg, skewXArg, skewYArg) {
    var transformString = ("rotate(" + rotationArg + "deg ) scale(" + scaleArg
        + ") skewX(" + skewXArg + "deg ) skewY(" + skewYArg + "deg )");
    
    // now attach that variable to each prefixed style
    element.style.webkitTransform = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

或者

function setTransform (element, elTransformArg) {
    var transformString= ("rotate(" + elTransformArg.rot + "deg ) scale("
        + elTransformArg.sca + ") skewX(" + elTransformArg.skx + "deg ) skewY("
        + elTransformArg.sky + "deg )");
    
    // now attach that variable to each prefixed style
    element.style.webkitTransform = transformString;
    element.style.MozTransform = transformString;
    element.style.msTransform = transformString;
    element.style.OTransform = transformString;
    element.style.transform = transformString;
}

现在调用函数：

setTransform(el, elRot, elScale, elSkewX, elSkewY);

或者

setTransform(el, elTransform);

要更改值，请更改变量或对象值并调用：

elRot = 45;
elSkewX = 30;
setTransform(el, elRot, elScale, elSkewX, elSkewY);

或者

elTransform.rot = 45;
elTransform.skx = 30;
setTransform(el, elTransform);

这样，您只需更改每个变换的“计数器”值，然后调用函数来应用变换。如上所述，保留任何未更改的变换很重要，因为这只是用新的变换替换了以前的 CSS 值。给出多个值意味着只使用最后一个值（CSS 的 C 部分）。

于 2013-11-08T21:45:09.863 回答
3

这里绝对最好的答案是一个真正的 API，它允许我们影响计算样式的任何现有值，而无需解析值。这样的东西以某种废弃的、非跨浏览器的形式存在于WebkitCSSMatrix API和 W3C“官方”等效的DOMMatrix中。我已经看到有关重新格式化和合并这两个 API 的讨论，但他们似乎并没有就实现达成一致。这是一个 shim 让它跨浏览器工作：来自 github 用户 arian 的 CSSMatrix 类。

它的工作原理是您可以将计算出的变换字符串（例如：）传递给它"translsate3d(0px, 0px, 100px) scale(1.2) skew(2)"，它会返回一个您可以使用旋转、变换、平移、倾斜函数操作的对象。每个函数都返回一个具有新操作值的现有实例，您可以简单地将其“toString”值重新应用于元素样式属性。

很多话，但这里有一个例子（Chrome 和 Safari 只是因为 WebkitCSSMatrix 的使用）：

var computedStyle = window.getComputedStyle(document.querySelector('.btn'));
var matrix = new WebKitCSSMatrix(computedStyle.transform);

// Every second, we add +6 degrees of rotation, no need to read the initial value since WebkitCSSMatrix has parsed it for us
window.setInterval(function(){
  matrix = matrix.rotate(6);
  // matrix = matrix.translate(2, 0, 0);
  // matrix = matrix.scale(1.8);
  document.querySelector('.btn').style.transform = matrix.toString();
}, 1000);
body{
			padding-top: 100px;
			text-align: center;
		}

		.btn{
			text-transform: uppercase;
			border-radius:200%;
			border:1px solid #000;
			width: 2em;
			height: 2em;
			display: inline-block;
			text-align: center;
			line-height: 2em;
			text-decoration: none;
			font-family: sans-serif;
			color: #000;
      
      // It is already rotated and scaled
			transition: transform 1000ms cubic-bezier(.28,.73,.31,1);
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
		}

		.btn:hover{
			background:#000;
			color:#fff;
      
      transform: rotate(0deg) scale(1.5);
		}
<a class="btn" href="#">|</a>

于 2017-06-14T16:25:00.223 回答
0

可能以下会帮助你...

el.style.webkitTransform = "";
el.style.MozTransform = "";
el.style.msTransform = "";
el.style.OTransform = "";
el.style.transform = "";
于 2013-10-30T07:33:53.380 回答