3D Portfolio Template
September 20, 2016 | 10 Feedbacks

3D Portfolio Template

A portfolio template, with a filter that triggers the rotation of 3D sections.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

CSS 3D Transforms can be used in plenty of creative ways, particularly if combined with CSS Transitions! Today’s nugget is a good example of how to use CSS to create a parallelepiped, whose faces are different projects. A filter on top of the page triggers the 3D rotations that reveal new projects.

Images: Unsplash

Creating the structure

The HTML structure is composed of two main elements: a nav.cd-3d-portfolio-navigation for the top projects navigation and a div.projects wrapping the portfolio projects. Inside the div.projects, three unordered lists (ul.row) are used to create the three rotating parallelepipeds.

Adding style

Each ul.row has a height equal to one-fourth of the viewport height and is translated along the Z-axis of half the viewport width. This way, we move the rotation center of the element away from the user of a quantity equal to half the element width.
Its list items (portfolio projects) are then used to create the different faces of the parallelepiped and are translated/rotated according to the face they are on. For example, the front-face just needs to be translated back along the Z-axis, while the right face needs to be rotated along the Y-axis and translated back.

Here’s a simple animation explaining this concept (created using Adobe After Effects):


When the user selects one of the filters in the top navigation, each ul.row is rotated to reveal the selected face (more in the Event handling section).

As for the single projects, the project preview image is set as background-image of the .project-image::before element; it has an absolute position and a height of 240% the project height (which means, 60% of the viewport height); this way only a portion of the preview image is visible due to the overflow property of its .row > li ancestor.
The project content is wrapped inside the .project-content element which is placed right below the project preview image. When a project is open, the overflow property of the .row > li element is changed to reveal its content.

For the 3D rotation to work, the transform-style property of the .row elements is set to preserve-3d so that its children are placed in a 3D space. If the browser does not support this property, we replace the 3D effect with a fade-in/fade-out effect (we use Modernizr to check browser support).

Events handling

To implement this 3D portfolio, we created a Portfolio3D object and used the bindEvents function to attach event handlers to the proper elements.

The visibleFace property is used to store the parallelepiped face visible at the moment (if the ul.row has not been rotated, the visible face is the front face while, if it has been rotated of 90deg, the visible face is the left one and so on).

When the user selects a filter in the top navigation, the showNewContent() method is used to move the selected faces in the right position and to rotate the ul.row elements.

According to whether the selected filter precedes or follows the one already selected, the ul.row are rotated clockwise (‘rightToLeft’) or anticlockwise (‘leftToRight’). The getRotationPrameters method uses this direction value plus the visibleFace property value to determine the new rotation value of the ul.row; additionally, it takes care of determining which face is going to be visible to give it the proper classes. For example, if the face visible at the moment is the front face and we need to rotate the parallelepiped ‘rightToLeft’, then the new visible face will be the right one.


Sep 20, 2016
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Ali

    Hi there . It’s very nice!
    But usually , People don’t use this kind of websites.
    Anyway , Thanks for this :)

  • Killian Khoo

    Look nice ~

  • http://bradleylancaster.com Brad Lancaster

    This is great. Do you plan on doing some Advanced UI – Interaction Design video courses soon like this and incorporating some other advanced concepts from the past. I would love it if you do. Your other courses look good however i’m not a beginner.

    • http://codyhouse.co/ Sebastiano Guerriero

      Def on our roadmap ;)

  • Oliver

    I have some problems with my iPhone 6s. The back to Top button is not working and and after switching the projects with the Filter buttons the projects are not always showing the full text (the scroll is not working so there is only the text that is on the first screen without scrolling ( this happened by Filter2 but I’m not sure if this is really a problem of Filter2 or it is happening random after switching the projects with the Filter buttons)

  • Stephen

    Is there any way to make one of the “Filters” contain more than 3 “Projects?”

  • Chris Raymond

    I’ve really enjoyed seeing your work in making interesting transitions and animations for portfolio templates. I would love to see what you could do within each project’s content area beyond a ginormously long block of text, which is not how anyone would talk about a project. (At least, I hope they wouldn’t!) Can literally any html be put inside there without affecting the overall 3d animation effects?

    • Alex Bunt

      Yes, you could put any HTML you like in there :)

  • http://tonybrown.me Tony Brown

    I remember doing this kind of stuff with Flash lol, love that the standards are handling this with lots of support

  • Paul Rojas Carstensen

    On your demo scrolling doesn’t work on filter 2 & 3, I’ve been trying to find the problem but my hair is now turning white, any ideas?