How to make a mirror of menu in CSS

Question

I am newbie in CSS coding. Is there any easy option in CSS to make "mirror" of menu which is constructed like below. I would like to get exactly the same menu but in mirror.

HTML:

<ul class="nav">
<li class="blue"><a href="/index.php">Home</a></li>
<li class="red"><a href="#">About</a></li>
<li class="green"><a href="#">Contact</a></li>
</ul>
</div>

and CSS:

.navbox {
    float: left;
    position: relative;
}
ul.nav {
    background: url("shadow.png") no-repeat scroll 0 0 transparent;
    display: block;
    left: 0;
    list-style: none outside none;
    padding: 60px 0;
    position: relative;
    top: 0;
    width: 200px;
}
.nav li a {
    color: white;
    display: block;
    font-size: 14px;
    margin: 5px 0 0;
    padding: 7px 15px;
    text-decoration: none;
    width: 100px;
}
.nav li a:hover {background: url("border.png") no-repeat scroll 0 0 black;
color: white;
padding: 7px 15px 7px 30px;}
.blue a { background: url("border.png") no-repeat scroll 0 0 blue;}
.red a { background: url("border.png") no-repeat scroll 0 0 red;}
.green a {background: url("border.png") no-repeat scroll 0 0 green;}

Hello again and thanks for the answers.

It almost solves my problem:

.mirror {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
}

But, is there any option which could avoid "mirroring" of the text? I mean:

<li class="red"><a href="#">About</a></li>
<li class="green"><a href="#">Contact</a></li>

That text stay without "mirroring"?

I think this question can help [Can you use CSS to mirror/flip text?][1] [1]: http://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text — Mahmoud Farahat, Nov 07 '12 at 11:59
Mahmoud's link will help you, but straight CSS isn't going to do it for you - you'll need to duplicate the DOM structure of your menu, and apply the mirroring CSS to the copy. Can you do a quick photoshop mockup of how you expect this to look? — Ben Hull, Nov 07 '12 at 12:14

score 1 · Answer 1 · answered Nov 07 '12 at 12:29

Check this blog.

This is having the same thing they have discussed.

May be useful for your design

(or)

           .rotated{
            -  moz-transform: rotate(-180deg);
             -webkit-transform: rotate(-180deg);
             transform: rotate(-180deg);
               filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
             }

Try this out

score 0 · Answer 2 · answered Nov 07 '12 at 12:26

0

Try to aply this class to a copy of the menu element:

.mirror    {
   -prefix-transform: scale(-1, 1);
}

answered Nov 07 '12 at 12:26

akplebani

81
2
13

score 0 · Answer 3 · answered Nov 07 '12 at 12:32

You can use the CSS 3 transform tag to rotate elements. Try this:

.rotated {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}

How to make a mirror of menu in CSS

3 Answers3