Here is a couple of examples of 3D effects in AngularJS 2 & CSS3 most are not really relevant so I’ll add more as I go along or suggest one if you know of any cool ways to get 3D animations with angularjs2. You can use regular angular animation directives such as ng-animate, ng-show & ng-hide (conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style). I’m hoping to add more here built specifically with ng2 to give you a quick start to work from. Stay tuned.
1. Square Grid Flip Example
This demonstrates how a panel can be flipped to show more information especially of an image.
2. Angular Flippy Demo
AngularJS directive implementation with a CSS3 flip animation.
With v2.0 you’ll find more customization within the directive itself. You are free to hook into any events like ng-click to fire the flip event.
3. Codepen Grid Flip
Another grid flip example that demonstrates how a panel can be flipped.
4. Video Creating d3 components with Angular2 and TypeScript
Bonus:
CSS only CSS3 3D Top Shift Menu
Learn how to create animated 3D navigation menu (with images) with CSS3 only (JavaScript-free ), and by using the power of CSS3 effects like perspective, box-sizing, transforms, gradients and transitions.