水平翻转html网页而不是文本
[英]Flip the html webpage horizontally not text
问题描述
我是网页开发的新手，试图实现两个菜单，一个菜单与另一个菜单相邻，看起来像镜子。
关键是我找到了使用以下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;
}
检查了类似问题的解决方案，但对我没有帮助。
3 个解决方案
解决方案1
2 2017-06-20 07:57:57
在您的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>
解决方案2
1 已采纳 2017-06-20 07:57:59
更改您的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);
}
解决方案3
1 2017-06-20 09:44:40
您可以通过text-align属性将.reflected类简单地用于镜像菜单
.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>
如何使用d3.js水平翻转画布左侧的文本？
[英]How to flip horizontally the text on the left part of the canvas with d3.js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.