Question

我正在使用两个类垂直和水平翻转。我做的第一个工作正常。但是，如果我垂直翻转它工作正常，但如果我然后尝试水平翻转它不会翻转。任何想法为什么会这样？

    .flippedhorizontal {
   -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.flippedvertical {
   -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

Answer 1

检查您的开发工具栏以查看使用了哪个声明，其他声明将被划掉。通过添加第二个类，您要求它保留或替换当前声明。在这种情况下，默认行为似乎保持原始值。

为简洁起见，我省略了前缀，这是我认为你想要的：

// START WITH HORIZONTAL
transform: scaleX(-1);
// ADD VERTICAL
transform: scaleX(-1) scaleY(-1);

反之亦然：

// START WITH VERTICAL
transform: scaleY(-1);
// ADD HORIZONTAL
transform: scaleY(-1) scaleX(-1);
// putting X first ^here would be same in this case... *I think...

但为了简单起见，让我们进行隐式转换：

// START WITH IDENTITY TRANSFORM
transform: scaleX(1) scaleY(1)
// ADD HORIZONTAL
transform: scaleX(-1) scaleY(1);
// ADD VERTICAL
transform: scaleX(-1) scaleY(-1);

要解决此问题，您需要控制变换本身，而不是类。这相对简单：

var el, scaleX, scaleY;

function setTransform (element, scaleXArg, scaleYArg) {
    var scaleString = ("scaleX(" + scaleXArg + ") scaleY(" + scaleYArg + ")");

    // now attach that variable to each prefixed style
    element.style.webkitTransform = scaleString;
    element.style.MozTransform = scaleString;
    element.style.msTransform = scaleString;
    element.style.OTransform = scaleString;
    element.style.transform = scaleString;
}

el = document.getElementById("elementYouWantToUse");
scaleX = "1";
scaleY = "1";

// call setTransform to initialize
setTransform(el, scaleX, scaleY);

// to finish you can choose to call setTransform with new arguments:
setTransform(el, -1, 1);
setTransform(el, 1, -1);
setTransform(el, -1, -1);
setTransform(el, 1, 1);

需要注意的是，如果使用scaleX和scaleY变量，则只能在事件处理程序中测试和更改一个值，而不是直接使用值调用时。以下是简单测试的逻辑（根据需要将scaleX替换为scaleY）：

if ( scaleX === "1" ) {
    scaleX = "-1";
    setTransform(el, scaleX, scaleY);
} else {
    scaleX = "1";
    setTransform(el, scaleX, scaleY);
}

Answer 2

对于同一属性，元素不能具有2个不同的值。这已经在Thisiate答案中，并且绝对正确。

在你的情况下，变换不能同时具有scaleX和scaleY，即使它们来自2个不同的类。

解决案例的最简单方法是为组合类创建一个新样式（当元素同时具有两个类时）

function flipX() {
    $('#test').toggleClass("flipX");
}

function flipY() {
    $('#test').toggleClass("flipY");
}

#test {
   border: solid 1px blue;
   font-size: 80px;
   display: inline-block;
   transition: all 1s;
}

.flipX {
    transform: scaleX(-1);
}

.flipY {
    transform: scaleY(-1);
}

.flipX.flipY {
    transform: scale(-1, -1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" onclick="flipX()">flip X</input>
<input type="checkbox" onclick="flipY()">flip Y</input>
<div id="test">TEST</div>

垂直翻转后水平翻转不起作用

2 个答案: