Angular 2 3D Effects Examples & Resources

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

Square Grid Flip Example
Square Grid Flip Example

This demonstrates how a panel can be flipped to show more information especially of an image.

Demo

2. Angular Flippy Demo

Angular Flippy Demo
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.

Code Demo

3. Codepen Grid Flip

Codepen Grid Flip
Codepen Grid Flip

Another grid flip example that demonstrates how a panel can be flipped.

Demo

4. Video Creating d3 components with Angular2 and TypeScript

Bonus:

CSS only CSS3 3D Top Shift Menu

CSS only CSS3 3D top shift menu
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.

Article Demo

Sam is a passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

Leave a Reply

Your email address will not be published. Required fields are marked *