如何在html/css的移动视图中逆时针旋转项目?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (192)

在一个jsfiddle 中,它的项目是垂直排列的,在移动视图中是可以实现顺时针旋转的

为了实现这一点,我使用的HTML和CSS代码如下:

HTML:

<div class="cloudbasedtextipad" style="display:flex;">
   <div class="cloud-based-text">
     <h6 style="color:black;font-family:'Roboto';font-weight:normal;">XYZ</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">HELLO WORLD</p>
      <div class="product-quotes">
     <p>I AM GOOD </p>
      <a style="float:right;">Learn More</a>
      </div>
   </div>
   <div class="tvs">

      <div class="tv">
         <img src="https://s15.postimg.cc/yykgtjcqz/mango.jpg" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
   </div>
</div>

CSS:

@media only screen and (max-width: 767px)
{
div.franchisehubtv, div.cloudbasedtextipad  {
flex-direction: column;
}
.tv img 
{
max-width: 100%;
height: auto;
}   
.franchise-hub-text, .cloud-based-text
{
width: 100%;
}
}
.franchise-hub-text, .cloud-based-text
{
width: 50%;
}
div.franchisehubtv, div.cloudbasedtextipad   
{
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}

问题:

在CSS代码中做哪些更改,可以实现垂直逆时针排列

在jsfiddle 中,当我们在移动视图中获取网页时,苹果和芒果的图像应该在白色方框文本(逆时针方向)之上。

以下是不奏效的CSS代码:

   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
提问于
用户回答回答于

由于你使用的是Flexbox布局,可以给带有图像的容器负值order

@media only screen and (max-width: 767px)
{
/* ... */
.tvs {
order: -1;
}
/* ... */
}

扫码关注云+社区

领取腾讯云代金券