Question 188936 in Html Question posted in
Some basic documentation can be found here.

Html – How can I add CSS of an Image to stand on a surface floor like a 3d

I want to make a floor and the cartoons should be placed above the floor as it is a 3d, The floor has a grid in which every cartoon is placed. I don’t want to change the floor axis or grid axis, it should be same as now, just I want the images and text in every grid element to be at 90 degree against the grid and floor position so that It can be look like a 3d.

I have attached an image to explain what I want, currently it shows output as in RED section in image, But I want output exactly as the yellow section that I made from photoshop.
Please see this image for the Output I want

Code Snippet

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);
  /* top: 2em; */
}

.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>
Tags:

2

Answers


  1. 0

    To make an image appear as if it is standing on a surface floor in CSS, you can use CSS transforms and perspective. Here is an example of how to achieve this effect:

    .image-container {
  perspective: 1000px;
  transform-style: preserve-3d;
}

img {
  width: 300px;
  /* adjust as needed */
  height: 200px;
  /* adjust as needed */
  transform: rotateX(45deg);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
  /* add a shadow to give it more depth */
}
    <div class="image-container">
  <img src="your-image-url.jpg" alt="Your Image">
</div>
    Login or Signup to reply.
  2. 0

    In this code snippet, I tried to give every possible combination of tilting images to stand any floor you want

    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search