Posts Tagged ‘3D’

It seems as though 3D is quickly becoming the new 2D in digital design. This pattern has moved from the big screen onto smaller screens for the web. With a growing number of CSS/JS libraries for animation it has become easier to render objects right within the browser.

These tutorials should provide an excellent introduction to CSS3 and JavaScript oriented animation. If you’ve never coded your own custom page animations then this will take a bit of practice. But with time the whole process will become like second nature.

Read the rest of this entry »

Enabling users to view all sides of a product is a common UI pattern, mostly, in e-commerce websites.

jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images.

jQuery Interactive 3D

It is so easy to use and works with a simple function and a list of specifically-named images.

And, there are options for customization like the cursor icon, speed, touch support, auto-play and more.

  • Tags:
  • Filed under: Browsing, Goodies, GPL License
  • Tridiv is a free-to-use web application for creating 3D CSS shapes pretty easily.

    Using the app, we can insert 4 different shapes (cuboid, pyramid, cylinder, prism) and resize or rotate them.

    The editor interface displays all views (side, front, top) at the same time and it is possible to use any number of shapes.


    Each shape can be styled (color, opacity, background image) and previewing the work is only a single-click away.

    Once completed, Tridiv generates the HTML-CSS code and a “save button” can store it on localStorage.

    Mapita is a free Photoshop action for converting a flat map into a good-looking three dimensional and isometric one.

    There are actions to create the map with a style of sand, snow or grass.

    Also, many elements exist to beautify it: buildings, trees, clouds, lakes and more.

    Such isometric maps are usually found in games but they can be created for real-world usage to share a location a stylish and fun map.

    3D Isometric Map Photoshop Action

    When building any map-related applications, there are many popular providers to select from like Google Maps or Bing Maps and they provide APIs for integration.

    However, using an open source engine and the ability to switch providers anytime offers more freedom + flexibility.

    Cesium, a WebGL-powered JavaScript mapping library, offers just that by being provider-agnostic.


    It has support for 3 different views: 3D globe, 2D map, and 2.5D Columbus View where transitioning from one to another is just a line of code.

    Drawing any type of shapes, highlighting specific regions and interacting with the map using mouse or touch is pretty easy.

    Cesium comes as a single JS file and work in all major browsers including mobile.

  • Tags:
  • Filed under: Goodies, Map, Other License