Is there a way to apply CSS to an image so that it appears to be resting on a surface like a 3D object

I need to create a 3D floor with cartoons placed on top. The floor has a grid where each cartoon is positioned. I want to maintain the same axis for both the floor and grid, but I need the images and text in each grid element to be at a 90-degree angle to the grid and floor position in order to achieve a 3D effect.

I have provided an image to illustrate my desired outcome. The current output is shown in the RED section, but I want it to look like the yellow section that I created using Photoshop. Please refer to this image for the desired output: Image Link

Custom CSS Code:

body {
  background-color: #2ee5a2;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  perspective: 10em;
  perspective-origin: 50% calc(50% - 2em);
  overflow: hidden;
}

.chatcontainer {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  grid-template-rows: repeat(7, 30px);
  gap: 60px;
  margin: 10%;
  background-color: #aa69e7;
  border: 1px solid;
  transform: rotateY(0deg) rotateX(63deg);
}

.chatcontainer div img {
  width: 50px;
}

.grid-element {
  max-width: 500px;
  transform: rotateY(0deg) rotateX(327deg);
}

.usernamelink {
  color: #fafafa;
  text-decoration: none;
  bottom: 17px;
  position: absolute;
  transform: perspective(739px) rotateY(0deg) rotateX(327deg);
}
<div class="chatcontainer" id="chatcontainer">
  <div class="static grid-element">
    <img class="animatedGiff" src="https://s.cdpn.io/3/pacman-ghost-hi_1.png">
    <span>
    <b>
      <a class="usernamelink" href="" target="_blank">username</a>
    </b>
    </span>
  </div>
  <div class="static grid-element">
    <img class="animatedGiff" src="https://s.cdpn.io/3/pacman-ghost-hi_1.png">
    <span>
    <b>
      <a class="usernamelink" href="" target="_blank">username</a>
    </b>
   </span>
  </div>
</div>

javascripthtmlcss3d

Answer №1

This code snippet provides a way to tilt images in different combinations to fit any floor surface.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.floor {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  transform-style: preserve-3d;
  perspective: 800px;
  margin: 0 auto;
}

.cartoon {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #00f;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  transform: rotateX(60deg) translateZ(100px);
}

.cartoon:nth-child(2) {
  left: 150px;
  transform: rotateX(60deg) translateZ(100px) rotateY(45deg);
}

.cartoon:nth-child(3) {
  left: 300px;
  transform: rotateX(60deg) translateZ(100px) rotateY(90deg);
}

.cartoon:nth-child(4) {
  top: 150px;
  transform: rotateX(60deg) translateZ(100px) rotateY(135deg);
}

.cartoon:nth-child(5) {
  left: 150px;
  top: 150px;
  transform: rotateX(60deg) translateZ(100px) rotateY(180deg);
}

</style>
</head>
<body>
<div class="floor">
  <div class="cartoon">Cartoon 1</div>
  <div class="cartoon">Cartoon 2</div>
  <div class="cartoon">Cartoon 3</div>
  <div class="cartoon">Cartoon 4</div>
  <div class="cartoon">Cartoon 5</div>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Load JSON Data Using D3 When Column Definitions are Separated

I'm currently working with d3.js and struggling to grasp how I can effectively load a JSON file representing a table that has separate column definitions. A typical JSON file, which I have no issue loading, might appear like this: [ { "id": 1, ...

javascriptjsond3.js

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

htmlcssbootstrap-5

Enhance npm package by implementing custom functionality with React Component

I have designed an app that bears a striking resemblance to the following code: class MyCustomApp extends React.Component { constructor (props) { super(props) this.state = { tags: [ { id: 1, name: "Oranges" }, { id: 2, ...

javascriptreactjsreact-nativenpmtags

Understanding 'this' in ChartJS within an Angular application

Here is my event handler for chartJS in Angular that I created: legend: { onClick: this.toggleLegendClickHandler After changing the text of the y scale title, I need to update the chart. I am looking to accomplish this by calling this._chart.cha ...

javascriptangularchart.js

The hyperlink appears to be malfunctioning with an additional border surrounding it within a pop-up window

I am facing an issue with a link <a> not functioning properly with a popup dialog on . Additionally, there seems to be a border that appears around the <a> when the popup initially displays. If you click on "Leer más" for any product, you can ...

javascriptjquerycsshyperlinkdialog

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

$.fn.slideUpTransition = function() { return this.each(function() { var $el = $(this); $el.css("max-height", "0"); $el.addClass("height-transition-hidden"); }); }; When utiliz ...

javascriptjquery

Encountering invalid JSON response while making an API request

Struggling to integrate GoToMeeting's API by sending a POST request to create a meeting. Currently, attempting to manually code the meeting body and send the necessary headers, but encountering an issue with invalid JSON error. Below is the code snipp ...

javascriptjsonapiexpress

How to vertically center a div using CSS

I need assistance center aligning #container with the following code: <div id="container"> <p>new</p> </div> The CSS provided is as follows- #container { position:relative; width:100%; background:red; padding:10px; ...

css

Switch out a character with its corresponding position in the alphabet

Starting out, this task seemed simple to me. However, every time I attempt to run the code on codewars, I keep getting an empty array. I'm reaching out in hopes that you can help me pinpoint the issue. function alphabetPosition(text) { text.split ...

javascriptarraysstring

Expanding interfaces dynamically in Typescript

Currently, I am facing a challenge while attempting to integrate an existing React Native module equipped with the following props: useComponent1: boolean useComponent2: boolean This is how the implementation looks like: render(){ if(useComponent1){ ...

javascriptreactjstypescriptreact-native

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

javascriptcssreactjsmaterial-ui

Guide on refreshing threejs morph targets using blender GLTF shape keys

I have been working with a Blender file that contains multiple shape keys. By adjusting the slider in Blender, I am able to manipulate these shape keys. (screenshot): Currently, I am exporting the GLTF and then importing it into Three.js. Upon console.l ...

javascriptthree.jsgltf

Issue with menu height persisting while resizing screen

For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px. Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery ...

jquerycssresponsive-design

Guide on embedding a form component within an iframe using ReactJS

I am trying to figure out how to render my form component inside an iframe, but so far it's only rendering the iframe itself. Any tips on how to accomplish this task? import './App.css'; import ReactDOM from "react-dom/client" impo ...

javascripthtmlreactjs

There seems to be an issue with the bullet functionality in phaser.io

I'm having trouble firing a bullet from my object in my game. I have been struggling to find the proper reason for the issue. Here is a snippet of my code. Game.js var Game = { preload : function() { // spaceship image screen th ...

javascriptphaser-framework

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

javascriptjquerycssclickpseudo-element

Enhance your loader functionality by dynamically updating ng-repeat using ng-if

To better illustrate my issue, here is a link to the fiddle I created: https://jsfiddle.net/860Ltbva/5/ The goal is to show a loading message while the ng-repeat loop is still loading and hide it once all elements have been loaded. I referenced this help ...

javascriptangularjsangularjs-ng-repeatloaderangular-ng-if

Custom template for prefetched data is not displaying in Typeahead.js

I'm currently utilizing Twitter's typeahead.js plugin for displaying autocomplete suggestions. Here is the code snippet: $.ajax({ url:'/getlocals/', success: function(data){ $('.local-type').typeahead({ ...

javascriptjquerytypeahead.js

Browser local storage protection

Utilizing local storage to preserve specific data for my website has been beneficial. Each necessary object is stored so that users can access them on their browser (in chrome: Resource -> Local Storage). My objective now is to make these objects unrea ...

javascriptjquerybackbone.jslocal-storage

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

Attempting to compare 2 entries in an *ngFor loop. The code should compare the value at the current object to a value at the previous object. <ng-container *ngFor="let item of s_1.comments[0]; index as b"> <article class="message i ...

javascriptarraysangulartypescript