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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments