Connect With WRD
feed via e-mail
feed via e-mail

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
  • It was very exciting to explore the cities when Google Maps had integrated 3D drawings of each building in some cities.

    OSM Buildings is a JavaScript library that enables us to create a similar functionality using any mapping provider.

    OSM Buildings

    The library uses Leaflet mapping engine and HTML5 canvas (rather than WebGL) and requires the geometry data of the area to be visualized.

    There are various free sources for such data and the library can be handy when creating such custom visualizations for a limited area.

  • Tags:
  • Filed under: Goodies, Map, Other License
  • Makisu is an experimental and very original dropdown menu with a 3D appearance which can fold up and down with a slick effect.

    The menu uses CSS 3D and comes as a jQuery plugin which auto-converts any targeted list elements.

    Makisu CSS 3D Menu

    It has several options for customization like the duration of the animation, shading color, perspective used for the menu and more.

    For browsers without CSS 3D support, it falls back to a standard list.

    oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper.

    The library doesn't depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.


    Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set.

    There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

    oriDomi is compatible with all modern browsers (including mobile).

    3D effects, if done smoothly, usually looks very good on the web as it is still unexpected for most to see anything that is not 2D online.

    Here is a jQuery image slider that offers slick 2D and 3D transitions: Adaptor.

    The plugin's 3D effect are supported by WebKit + Mozilla browsers and it falls back to standard fading transitions for the rest.

    Adaptor - jQuery 3D Image Slider

    It is lightweight and has multiple options for customization including: speed of the transitions, delay between each item auto-slideshow being on/off, pauseOnHover and more.

    Adaptor can also be controlled with custom events like switching to a desired item, showing the prev-next slide, playing and pausing it.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • RefineSlide is a lightweight (4kb gzipped) jQuery plugin for quickly integrating a responsive, image-based slider into our websites.

    The slider uses CSS3 transitions + 3D transforms (has JS fallback) and has a bunch of attractive transitions.

    It has an option to display thumbnails (auto-formatted and responsive) or arrows as the navigation (and, there is keyboard support as well).RefineSlide

    RefineSlide allows defining captions and can display them above the each image.

    The plugin can auto-play the items, delay between each slide can be set and callbacks exist on every level.

  • Tags:
  • Filed under: Gallery, Goodies, MIT License
  • 1 Comment
  • Uptime Robot