HTML CSS examples for CSS Animation:3D
Third level of navigation with 3D animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w w w .j av a 2 s . c o m--> direction:rtl; } nav ul { list-style:none; } a { margin:0; padding:0; font-size:12px; vertical-align:baseline; background:transparent; text-decoration:none; } .nav ul { *zoom:2; list-style:none; margin:0; padding:0; margin-top:5px; } .nav ul:before, .nav ul:after { content:""; display:table; } .nav ul:after { clear:both; } .nav ul>li { float:right; position:relative; } .nav a { display:block; padding:11px 21px; line-height:2.3em; color:Chartreuse; } .nav a.sub { display:block; padding:11px 21px; line-height:2.3em; color:yellow; } .nav a.secondsubs { display:block; padding:11px 21px; line-height:2.3em; color:blue; } .nav a:hover { text-decoration:none; background:pink; color:OrangeRed; } .nav ul li:hover>a { background-color:grey; color:BlueViolet; } .nav li.active { text-decoration:none; background:Chartreuse; } .nav li.active a { color:yellow; } .nav li ul { background:blue; color:pink; } .nav li ul li { width:201px; } .nav li ul a { border:none; } .nav li ul a:hover { background:OrangeRed; } .nav5 ul>li:hover>ul { max-height:1001px; -webkit-transform:perspective(401) rotate4d(0, 0, 0, 0); } .nav5 li ul { position:absolute; right:0; text-align:right; top:30px; z-index:1001; max-height:0; -webkit-transform:perspective(401) rotate4d(2, 0, 0, -91deg); -webkit-transform-origin:51% 0; -webkit-transition:351ms; -moz-transition:351ms; -o-transition:351ms; transition:351ms; } .nav5 li ul.secondsubs { top:0; right:100%; } .arrow { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; display:inline-block; height:9px; width:13px; margin-right:5px; } </style> </head> <body> <nav class="nav nav5"> <ul> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem</a> </li> <li> <a href="#">Lorem</a> <ul class="subs"> <li> <a href="" class="sub">Lorem</a> </li> <li> <a href="" class="sub">Lorem</a> </li> <li> <a href="" class="sub">Lorem</a> <ul class="secondsubs"> <li> <a href="" class="secondsubs">Lorem</a> </li> <li> <a href="" class="secondsubs">Lorem</a> </li> <li> <a href="" class="secondsubs">Lorem</a> </li> </ul> </li> </ul> </li> </ul> </nav> </body> </html>