7
Próbuję utworzyć 3d navbar za pomocą czystego CSS z transformacjami, przejściami i perspektywą.3D Navbar, który obraca się
Oto mój kod:
.navbar-fixed-bottom {
\t background: transparent;
\t }
\t
\t .navbar-perspective {
\t width: 100%;
\t height: 100%;
\t position: relative;
\t -webkit-perspective: 1100px;
\t -moz-perspective: 1100px;
\t perspective: 1100px;
\t -webkit-perspective-origin: 50% 0;
\t -moz-perspective-origin: 50% 0;
\t perspective-origin: 50% 0;
\t }
\t
\t .navbar-perspective > div {
\t margin: 0 auto;
\t position: relative;
\t text-align: justify;
\t -webkit-backface-visibility: hidden;
\t -moz-backface-visibility: hidden;
\t backface-visibility: hidden;
\t -webkit-transition: all 0.5s;
\t -moz-transition: all 0.5s;
\t transition: all 0.5s;
\t height: 50px;
\t font-size:20px;
\t }
\t
\t .navbar-primary {
\t background-color: #cccccc;
\t z-index: 2;
\t -webkit-transform-origin: 0% 100%;
\t -moz-transform-origin: 0% 100%;
\t transform-origin: 0% 100%;
\t }
\t
\t .navbar .navbar-secondary,
\t .navbar .navbar-tertiary {
\t background-color: #bfbfbf;
\t width: 100%;
\t -webkit-transform-origin: 0% 0%;
\t -moz-transform-origin: 0% 0%;
\t transform-origin: 0% 0%;
\t z-index: 1;
\t -webkit-transform: rotateX(-90deg);
\t -moz-transform: rotateX(-90deg);
\t transform: rotateX(-90deg);
\t -webkit-transition: top 0.5s;
\t -moz-transition: top 0.5s;
\t transition: top 0.5s;
\t position: absolute;
\t top: 0;
\t }
\t
\t .navbar .navbar-tertiary {
\t background-color: #b3b3b3;
\t }
\t
\t .navbar-rotate-primary {
\t height: 50px;
\t }
\t
\t .navbar-rotate-primary .navbar-primary {
\t -webkit-transform: translateY(0%) rotateX(0deg);
\t -moz-transform: translateY(0%) rotateX(0deg);
\t transform: translateY(0%) rotateX(0deg);
\t }
\t
\t .navbar-rotate-primary .navbar-secondary,
\t .navbar-rotate-primary .navbar-tertiary {
\t top: 100%;
\t -webkit-transition: -webkit-transform 0.5s;
\t -moz-transition: -moz-transform 0.5s;
\t transition: transform 0.5s;
\t -webkit-transform: rotateX(-90deg);
\t -moz-transform: rotateX(-90deg);
\t transform: rotateX(-90deg);
\t }
\t
\t .navbar-rotate-secondary,
\t .navbar-rotate-tertiary {
\t height: 50px;
\t }
\t
\t .navbar-rotate-secondary .navbar-primary,
\t .navbar-rotate-tertiary .navbar-primary {
\t -webkit-transform: translateY(-100%) rotateX(90deg);
\t -moz-transform: translateY(-100%) rotateX(90deg);
\t transform: translateY(-100%) rotateX(90deg);
\t }
\t
\t .navbar-rotate-secondary .navbar-secondary,
\t .navbar-rotate-tertiary .navbar-secondary {
\t top: 100%;
\t -webkit-transition: -webkit-transform 0.5s;
\t -moz-transition: -moz-transform 0.5s;
\t transition: transform 0.5s;
\t -webkit-transform: rotateX(0deg) translateY(-100%);
\t -moz-transform: rotateX(0deg) translateY(-100%);
\t transform: rotateX(0deg) translateY(-100%);
\t }
\t
\t .navbar-rotate-secondary-fallback .navbar-primary,
\t .navbar-rotate-tertiary-fallback .navbar-primary {
\t display: none;
\t }
\t
\t .navbar-rotate-tertiary .navbar-secondary {
\t -webkit-transform: translateY(-100%) rotateX(90deg);
\t -moz-transform: translateY(-100%) rotateX(90deg);
\t transform: translateY(-100%) rotateX(90deg);
\t }
\t
\t .navbar-rotate-tertiary .navbar-tertiary {
\t top: 100%;
\t -webkit-transition: -webkit-transform 0.5s;
\t -moz-transition: -moz-transform 0.5s;
\t transition: transform 0.5s;
\t -webkit-transform: rotateX(0deg) translateY(-100%);
\t -moz-transform: rotateX(0deg) translateY(-100%);
\t transform: rotateX(0deg) translateY(-100%);
\t }<html>
<head>
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
\t <nav id="navigation-bottom" class="navbar navbar-fixed-bottom">
\t \t <div class="navbar-perspective">
\t \t \t <div class="navbar-primary">
\t \t \t \t <a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-secondary')">Rotate To Face 2</a>
\t \t \t </div>
\t \t \t <div class="navbar-secondary">
\t \t \t \t <a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-tertiary')">Rotate To Face 3</a>
\t \t \t </div>
\t \t \t <div class="navbar-tertiary">
\t \t \t \t <a href="javascript:void(0);" onclick="$('#navigation-bottom').attr('class','navbar navbar-fixed-bottom navbar-rotate-primary')">Rotate Back To Face 1</a>
\t \t \t </div>
\t \t </div>
\t </nav>
</body>
</html>Mam pierwsze dwie twarze prawidłowo obracać za pomocą efektu 3D, ale trzeci twarz nie wygląda dobrze. Zauważysz, jak obracasz się od drugiego do trzeciego, że góra nie obraca się prawidłowo i wygląda płasko.
Każda pomoc jest bardzo doceniana.
Oto JSFiddle: http://jsfiddle.net/wcb6kerq/ – Armin