如何在html/css的移动视图中逆时针旋转项目？
如何在html/css的移动视图中逆时针旋转项目？
提问于 2018-06-06 04:43:47
我有一个fiddle，它的工作方式是在移动视图中垂直排列的项目顺时针。
为此，我使用的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代码中做些什么更改，以便项垂直排列成逆时针方向的。
在fiddle中，当我们在移动视图中查看网页时，苹果和芒果图像应该位于白盒文本(逆时针方向)之上。
我尝试使用以下CSS代码，但它不起作用。
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50708645
复制相关文章
相似问题