Using ng-repeat to locate the position of three-dimensional objects

Question

Using ng-repeat to locate the position of three-dimensional objects

Looking to achieve a final result similar to the illustration attached in the link provided. Each block in the picture is its own PNG image drawn using Illustrator and assigned with a specific CSS class.

The challenge I am facing is how to position each individual block to recreate this layout. Which CSS properties should I modify to achieve the desired positioning?

I have realized that centering them vertically may not give the intended look as they need to be aligned differently.

In the past, I have used ng-repeat to draw circles as round div elements, but encountered issues with arranging them in multiple dimensions.

If you have any suggestions on how to accomplish this or important considerations to keep in mind, please share.

You can view the fiddle here: https://jsfiddle.net/tyt4ft3g/1/

javascript html css angularjs 3d

Answer 1

Answer №1

Your approach is spot on and the most effective way to achieve the desired outcome for that object.

To achieve this, you need to assign position: absolute to all img elements and make sure they have a common parent with the style attribute position: relative. Properly position the images using the right and bottom properties so that each image appears centered relative to its predecessor.

Additionally, give higher z-index values to the images that should appear on top (i.e., smaller images on the left should have higher z-index compared to those on the right in descending order).

For an updated demonstration, check out the updated fiddle.

Refer to the code snippet below for a clearer understanding:

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

.copper {
  height: 30px;
  right: 72px;
  bottom: 28px;
  position: absolute;
  z-index: 3;
  content: url(http://i.imgur.com/LeIGPou.png);
}

.ins {
  height: 60px;
  right: 37px;
  bottom: 16px;
  position: absolute;
  z-index: 2;
  content: url(http://i.imgur.com/3bMaW3t.png);
}

.power {
  height: 70px;
  right: 0;
  bottom: 16px;
  position: absolute;
  z-index: 1;
  content: url(http://i.imgur.com/jFYquAI.png);
}

<div class="parent">
  <img class="copper">
  <img class="ins">
  <img class="power">
</div>

Answer 2

Your approach is spot on and the most effective way to achieve the desired outcome for that object.

To achieve this, you need to assign position: absolute to all img elements and make sure they have a common parent with the style attribute position: relative. Properly position the images using the right and bottom properties so that each image appears centered relative to its predecessor.

Additionally, give higher z-index values to the images that should appear on top (i.e., smaller images on the left should have higher z-index compared to those on the right in descending order).

For an updated demonstration, check out the updated fiddle.

Refer to the code snippet below for a clearer understanding:

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

.copper {
  height: 30px;
  right: 72px;
  bottom: 28px;
  position: absolute;
  z-index: 3;
  content: url(http://i.imgur.com/LeIGPou.png);
}

.ins {
  height: 60px;
  right: 37px;
  bottom: 16px;
  position: absolute;
  z-index: 2;
  content: url(http://i.imgur.com/3bMaW3t.png);
}

.power {
  height: 70px;
  right: 0;
  bottom: 16px;
  position: absolute;
  z-index: 1;
  content: url(http://i.imgur.com/jFYquAI.png);
}

<div class="parent">
  <img class="copper">
  <img class="ins">
  <img class="power">
</div>

Using ng-repeat to locate the position of three-dimensional objects

Answer №1

Similar questions

Customizing CSS for AGM Info Windows

Changing the text color of Material UI Accordion Summary upon expansion

Identifying the right time to apply CSS coding techniques

Tips for automatically adding `.withGraphFetched()` to all model queries in objection.js

How to enable checkbox return in PHP arrays

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

The Empty Spaces Surrounding the Navigation Bar in HTML/CSS

What is the best way to trigger a filter function that has been stored in a variable?

Display the view once the data has finished loading

`Javascript framework suggests ajax navigation as the preferred method`

Struggling to figure out the right way to make a CSS selector for the Yahoo stocks page

Is there a way to pause the animation when scrolling back to the top in the animate.css library?

Why doesn't vuex4.0 function properly as hooks when used within a Vue3 onMounted async function?

What are the disadvantages of nesting CSS Grids within each other?

What is a more efficient way to avoid duplicating code in javascript?

Guide to redirecting on click when utilizing an iframe

Experience the impact of a lagging network connection on Chrome extensions through the power of React-NextJS

What is the best way to iterate through one level at a time?

Customize border color for a single cell in a table using Bootstrap 4

Can the current website navigation be integrated into the blog script?