水平翻转HTML网页不是文字

我是新来的网页开发，试图实现两个菜单，一个是旁边的，看起来像镜子。水平翻转HTML网页不是文字

的一点是，我发现翻转的方式使用水平以下的CSS，

body { 
-webkit-transform:rotateY(180deg); 
-moz-transform:rotateY(180deg); 
-o-transform:rotateY(180deg); 
-ms-transform:rotateY(180deg); 
}

HTML是，

<body> 
    <h1>Vertical Menu</h1> 
    <div class="vertical-menu"> 
    <a href="#" class="active">Home</a> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    <a href="#">Link 4</a> 
    </div> 
</body>

，但文字也反转。我不能做的是反转让文本原样的菜单。

完整的CSS文件，

.vertical-menu { 
width: 200px; 
} 

.vertical-menu a { 
background-color: #eee; 
color: black; 
display: block; 
padding: 12px; 
text-decoration: none; 
} 

.vertical-menu a:hover { 
background-color: #ccc; 
} 

.vertical-menu a.active { 
background-color: #4CAF50; 
color: white; 
}

经过的解决方案，以类似的问题，但不能帮我。

来源

2017-06-20 mahi

翻转文本呢？所以整个盒子，然后文本得到一个额外的翻转... – marcellothearcane

导致你选择应该被转换的整个身体 – Alex

在你的'垂直菜单'div中，添加另一个div与另一个类，例如'vertical-content 。'如果您将菜单翻转至180度，则将内容翻转至-180度。它会保持你的内容水平和你的菜单垂直（但我认为它会是90deg ...但我用你的号码） – trichetriche

更改你的CSS：

body { 
-webkit-transform:rotateY(180deg); 
-moz-transform:rotateY(180deg); 
-o-transform:rotateY(180deg); 
-ms-transform:rotateY(180deg); 
} 
.vertical-menu { 
width: 200px; 
-webkit-transform:rotateY(180deg); 
-moz-transform:rotateY(180deg); 
-o-transform:rotateY(180deg); 
-ms-transform:rotateY(180deg); 
} 

.vertical-menu a { 
background-color: #eee; 
color: black; 
display: block; 
padding: 12px; 
text-decoration: none; 
} 

.vertical-menu a:hover { 
background-color: #ccc; 
} 

.vertical-menu a.active { 
background-color: #4CAF50; 
color: white; 
} 
h1{ 
-webkit-transform:rotateY(180deg); 
-moz-transform:rotateY(180deg); 
-o-transform:rotateY(180deg); 
-ms-transform:rotateY(180deg); 
}

来源

2017-06-20 07:57:59

非常感谢你@Minar Mnr。 – mahi

随着你的HTML和CSS一些变化，我得到的结果你想

见代码片段：

body > div:nth-child(2) { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
} 
 

 
body > div:nth-child(2) h1,body > div:nth-child(2) span { 
 
    -webkit-transform: rotateY(-180deg); 
 
    -moz-transform: rotateY(-180deg); 
 
    -o-transform: rotateY(-180deg); 
 
    -ms-transform: rotateY(-180deg); 
 
} 
 

 
body > div, body span { 
 
    display:inline-block; 
 
} 
 
.vertical-menu { 
 
    width: 200px; 
 
} 
 

 
.vertical-menu a { 
 
    background-color: #eee; 
 
    color: black; 
 
    display: block; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.vertical-menu a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<body> 
 
    <div> 
 
    <h1>Vertical Menu</h1> 
 
    <div class="vertical-menu"> 
 
     <a href="#" class="active"><span>Home</span></a> 
 
     <a href="#"><span>Link 1</span></a> 
 
     <a href="#"><span>Link 2</span></a> 
 
     <a href="#"><span>Link 3</span></a> 
 
     <a href="#"><span>Link 4</span></a> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <h1>Vertical Menu</h1> 
 
    <div class="vertical-menu"> 
 
    <a href="#" class="active"><span>Home</span></a> 
 
     <a href="#"><span>Link 1</span></a> 
 
     <a href="#"><span>Link 2</span></a> 
 
     <a href="#"><span>Link 3</span></a> 
 
     <a href="#"><span>Link 4</span></a> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-06-20 07:57:57 Chiller

非常感谢你@Chiller。 – mahi

，您可以简单地使用.reflected类镜子菜单与text-align财产

.reflected{ 
    text-align:right; 
}

.vertical-menu { 
 
width: 200px; 
 
} 
 

 
.reflected{ 
 
    text-align:right; 
 
} 
 

 
.holder{ 
 
    float:left; 
 
    padding:2px; 
 
} 
 

 
.vertical-menu a { 
 
background-color: #eee; 
 
color: black; 
 
display: block; 
 
padding: 12px; 
 
text-decoration: none; 
 
} 
 

 
.vertical-menu a:hover { 
 
background-color: #ccc; 
 
} 
 

 
.vertical-menu a.active { 
 
background-color: #4CAF50; 
 
color: white; 
 
}

<body> 
 
    <div class="holder"> 
 
    <h1>Vertical Menu</h1> 
 
    <div class="vertical-menu"> 
 
    <a href="#" class="active">Home</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="holder"> 
 
    <h1>Vertical Menu</h1> 
 
    <div class="vertical-menu reflected"> 
 
    <a href="#" class="active">Home</a> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    </div> 
 
    </div> 
 
    
 
</body>

来源

2017-06-20 09:44:40 Raj

非常感谢你@Raj。 – mahi

水平翻转HTML网页不是文字

回答

相关问题