Question

我知道我们可以使用负号

逆时针旋转元素

transform : rotate(-20deg);

但这仅适用于x轴。我想沿y轴旋转元素。我试过了

transform : rotateY(-20deg);

这不起作用，它使元素在我们使用的方向上旋转：

transform : rotateY(20deg);

我正在寻找半小时的答案。请帮忙。

Answer 1

当您使用transform : rotate(-20deg);时，您说它是only for x-axis.

所以你的问题是：I want to rotate element along the y-axis.如果你想要垂直旋转你的div，那么下面的代码可能会有所帮助：

＆＃13;

.rotate-vertically {
  height:100px;
  width:100px;
  background:red;
  padding:10px;
  text-align:center;
   transition: all 1.0s linear;
   
}

.rotate-vertically:hover {
  transform:rotateX(180deg);
}

＆＃13;

<div class="rotate-vertically">Hover me!
</div>

＆＃13;

更多信息here

Answer 2

为什么不呢？确实如此。或者你想拉伸元素？然后transform:scale()会帮助你。

＆＃13;

div{
  transform: scale(2,1);
  margin-left:200px;
}

＆＃13;

<div>text</div>

＆＃13;

（同时添加左边距，因为缩放将元素推离屏幕）

如何逆时针旋转元素

2 个答案: