<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngView 3D page turn</title>
</head>
<body>
<link href="style.css" rel="stylesheet" />
<h1>ngView with 3D page turn</h1>
<div class="ngViewRelative">
<a href="#/First">First page</a>
<a href="#/Second">Second page</a>
<div ng-view class="ngViewContainer"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate', 'ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/First', {
templateUrl: 'first.html'
})
.when('/Second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/First'
});
}
]);
</script>
</body>
</html>
.ngViewRelative {
position: absolute;
height: 300px;
width: 600px;
background-color: beige;
perspective: 600px;
overflow: hidden;
}
.ngViewContainer {
position: absolute;
width: 500px;
display: block;
background-color: lightblue;
margin: 10px;
padding: 10px;
}
@keyframes enter-animation {
from {
transform: translateX(-250px) rotateY(-180deg) translateX(250px);
animation-timing-function: ease;
opacity: 0;
}
to {
transform: translateX(-250px) rotateY(0deg) translateX(250px);
animation-timing-function: ease;
opacity: 1;
}
}
@-webkit-keyframes enter-animation {
from {
-webkit-transform: translateX(-250px) rotateY(-180deg) translateX(250px);
-webkit-animation-timing-function: ease;
opacity: 0;
}
to {
-webkit-transform: translateX(-250px) rotateY(0deg) translateX(250px);
-webkit-animation-timing-function: ease;
opacity: 1;
}
}
.ngViewContainer.ng-enter {
-webkit-animation-name: enter-animation;
-webkit-animation-duration: 1s;
animation-name: enter-animation;
animation-duration: 1s;
}
@keyframes leave-animation {
from {
transform: translateX(-250px) rotateY(0deg) translateX(250px);
animation-timing-function: ease;
opacity: 1;
}
to {
transform: translateX(-250px) rotateY(180deg) translateX(250px);
animation-timing-function: ease;
opacity: 0;
}
}
@-webkit-keyframes leave-animation {
from {
-webkit-transform: translateX(-250px) rotateY(0deg) translateX(250px);
-webkit-animation-timing-function: ease;
opacity: 1;
}
to {
-webkit-transform: translateX(-250px) rotateY(180deg) translateX(250px);
-webkit-animation-timing-function: ease;
opacity: 0;
}
}
.ngViewContainer.ng-leave {
-webkit-animation-name: leave-animation;
-webkit-animation-duration: 1s;
animation-name: leave-animation;
animation-duration: 1s;
}
<div>
<h2>First page</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur dui nunc, vel feugiat lectus imperdiet et. In hac habitasse platea dictumst. In rutrum malesuada justo, sed porttitor dolor rutrum eu. Sed condimentum tempus est at euismod. Donec in faucibus urna. Fusce fermentum in mauris at pretium. Aenean ut orci nunc. Nulla id velit interdum nibh feugiat ultricies eu fermentum dolor. Pellentesque lobortis rhoncus nisi, imperdiet viverra leo ullamcorper sed. Donec condimentum tincidunt mollis. Curabitur lorem nibh, mattis non euismod quis, pharetra eu nibh.
</p>
</div>
<div>
<h2>Second page</h2>
<p>
Ut eu metus vel ipsum tristique fringilla. Proin hendrerit augue quis nisl pellentesque posuere. Aliquam sollicitudin ligula elit, sit amet placerat augue pulvinar eget. Aliquam bibendum pulvinar nisi, quis commodo lorem volutpat in. Donec et felis sit amet mauris venenatis feugiat non id metus. Fusce leo elit, egestas non turpis sed, tincidunt consequat tellus. Fusce quis auctor neque, a ultricies urna. Cras varius purus id sagittis luctus. Sed id lectus tristique, euismod ipsum ut, congue augue.
</p>
</div>