Question

在下面的示例中，单击div时，它将旋转并倾斜，但看起来在此过渡期间位置向右移动几个像素。

有没有办法强制它在过渡期间保持在左侧？我曾经玩过原点，但是还没有能够做到恰到好处：

＆＃13;

$1

＆＃13;

var data = "cat fish";

var arr = [
    "cat fish",
    "cat",
]


function buildColoredString(data, arr) {
    var coloredString = data;

    for (var regex in arr) {
        var toReplace = new RegExp("(" + arr[regex] + ")", "g");
        var newString = "<b style='color: green;'>$1</b>";
        coloredString = coloredString.replace(toReplace, newString);
    }

    console.log(coloredString);
}

＆＃13;

$('div.book').click(function() {
  $(this).toggleClass('open');
});

＆＃13;

Answer 1

您在-webkit-transform-origin中错过了“转化”！

$('div.book').click(function() {
  $(this).toggleClass('open');
});

div.bg {
  background-color: #00adef;
  display: inline-block
}

.book {
  transition: all 2s;
  width: 145px;
  height: 200px;
  background-color: #333;
  -webkit-transform-origin: left;
}

.book.open {
  -webkit-transform: rotateY(-90deg) skewY(-45deg);
  -webkit-transform-origin: left;
  transform-origin: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bg'>
  <div class='book'>
  </div>
</div>

Answer 2

更改

transition: all 2s;

为：

transition: transform 2s;

因为transition: all也会将你的起源从（50％，50％）转换为（0,0）

＆＃13;

$('div.book').click(function() {
  $(this).toggleClass('open');
});

＆＃13;

div.bg {
  background-color: #00adef;
  display: inline-block
}

.book {
  /*transition: all 2s;*/
  transition: transform 2s;

  width: 145px;
  height: 200px;
  background-color: #333;
  -webkit-origin: left;
}

.book.open {
  -webkit-transform: rotateY(-90deg) skewY(-45deg);
  -webkit-transform-origin: 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bg'>
  <div class='book'>
  </div>
</div>

＆＃13;

如何保持CSS变换（旋转和偏斜原点）不向右移动几个像素？

2 个答案: