Flip the html webpage horizontally not text

Question

I am new to the web page development, trying to implement two menus, one is next to the other, looking like mirrors.

The point is I found the way to flip it horizontally using following css,

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

Html is,

<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>

but text is also inverted. What I cannot do is invert the menu letting the text as it is.

Complete CSS file is,

.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;
}

Checked the solutions to the similar questions, but not helped me.

Answer 1

With a few changes in your html and css, i got the result you want

See code snippet:

 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>

Answer 2

Change your 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);
}

Answer 3

You can simply use .reflected class to the mirror menu with the text-align property

.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>

Flip the html webpage horizontally not text

Question

3 answers

solution1
2 2017-06-20 07:57:57

solution2
1 ACCPTED 2017-06-20 07:57:59

solution3
1 2017-06-20 09:44:40

Flip the html webpage horizontally not text

Question

3 answers

solution1 2 2017-06-20 07:57:57

solution2 1 ACCPTED 2017-06-20 07:57:59

solution3 1 2017-06-20 09:44:40

solution1
2 2017-06-20 07:57:57

solution2
1 ACCPTED 2017-06-20 07:57:59

solution3
1 2017-06-20 09:44:40