Question

我有以下问题： -我要旋转图片中显示的文字 -在这里，我尝试在以下代码中执行此操作谁能为我提供解决方案？

div {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top:20px;
}

div#myDiv {
  -ms-transform: rotate(315deg); 
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg); 
}

<html>
<head>
<style>

</style>
</head>
<body>

<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>

</body>
</html>

我要设置“演示文字”之类的文字，如图所示：

i want set text like "demo text" show in image

Answer 1

您可以在div上display: inline-block，然后将transform-origin设置为正确。

请参见以下示例：

div#myDiv {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
  display: inline-block; /* add display: inline-block */
}

div#myDiv {
  transform: rotate(315deg);
  transform-origin: right;
}

<div id="myDiv">
  This div element is rotated .
</div>
<div id="myDiv">
  This div element is rotated .
</div>
<div id="myDiv">
  This div element is rotated .
</div>

Answer 2

这是我旋转文本的解决方案。它适用于所有设备。

  openUrl(){
    let url='http://192.168.0.7:8000/pay';
    const browser = this.iab.create(url, '_blank', 
      'hidden=no,location=yes,clearsessioncache=yes,clearcache=yes');
    browser.show();
  }

.main {
  display: flex;
  margin: 4rem auto;
}

div#myDiv {
  background-color: black;
  flex: 0 0 20%;
  text-align: center;
  color: white;
  border: 1px solid black;
  padding: 10px 0;
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

Answer 3

首先，给多个HTML元素相同的ID是无效的。我将其替换为类，并在CSS中也使用了相应的选择器，并在其中添加了更多样式。

尝试一下：

div {
  width: 100%;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
}

.myDiv {
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  display: inline !important;
  float: left;
  width: 200px !important;
}

<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>

Answer 4

我认为您应该使用flex来提高代码的动态性如果您想完全按照您共享的图像的方式构建某些东西，首先将元素封装到容器中

<div class="container">

elem 1

elem 2

elem 3

</div>

其中容器将具有display flex

弯曲方向将为行如果您想简化您的工作，请创建一个网格，您可以使用 bootstrap 4网格及其基于flex的

一旦设置了网格，就可以放置元素并将其旋转旋转到所需的任何角度，那应该是方法当用几行代码调整屏幕大小时，flex会放置ur元素，并且也会平滑地（默认动画）重新排列。尝试解决和更新。希望这会指导您

如何显示使用CSS旋转文本？

4 个答案: