How can you create HTML elements with a unique perspective?

To achieve a unique perspective when rendering HTML elements, we explored various methods. However, we found that CSS skew transformations did not produce the desired effect, often distorting the element's aspect ratio or creating unwelcome warping.

Below are some CSS skew transformations that we experimented with, none of which matched the quality of the examples we aimed to replicate.

For a visual representation of our attempts, you can view our Codepen here: https://codepen.io/anon/pen/MMzdPx

transform: skew(20deg, -15deg);

transform: skew(45deg, -25deg);

transform: skew(45deg, -30deg);

If you are seeking to achieve the type of perspective rendering seen in the examples below, we are still exploring alternative techniques:

https://i.sstatic.net/N4tEr.jpg https://i.sstatic.net/4PK89.jpg https://i.sstatic.net/rjsrm.jpg https://i.sstatic.net/0OWOd.jpg

htmlcssmatrixperspective

Answer №1

To achieve the desired effect, it is important to utilize perspective in combination with rotation.

img {
  width:150px;
  margin:20px;
}
img.first {
  transform:perspective(500px) rotateY(20deg);
}
img.last {
  transform:perspective(500px) rotateY(-20deg);
}
<img src="https://i.imgur.com/DGAOsPz.png" class="first">
<img src="https://i.imgur.com/DGAOsPz.png" class="last">

img {
  width:150px;
  margin:30px;
  transform:perspective(500px)  rotateY(15deg) rotateX(50deg) rotateZ(-20deg);
}
<img src="https://i.imgur.com/DGAOsPz.png" >

For more information, refer to the related question:

CSS 3d transform doesn't work if perspective is set in the end of property

Answer №2

Here's an example that demonstrates the use of CSS custom properties to clarify the calculation.

Important Note: The sequence of transform properties holds significance as they are assessed from right to left:

Refer to MDN transform CSS

The transform functions are applied in order from left to right, implying that composite transforms are essentially executed from right to left.

For instance, 

transform: rotateX(90deg) translateX(100px)
differs from 
transform: translateX(100px) rotateX(90deg)
. The former translates first and then rotates while the latter performs the rotation prior to the translations.

.box {
  width: 130px;
  height: 268px;
  background-size: cover;
}
.box:nth-child(4n+1) {
  background: url(https://picsum.photos/id/100/136/276);
}
.box:nth-child(4n+2) {
  background: url(https://picsum.photos/id/200/136/276);
}
.box:nth-child(4n+3) {
  background: url(https://picsum.photos/id/300/136/276);
}
.box:nth-child(4n+4) {
  background: url(https://picsum.photos/id/400/136/276);
}

.container {
  transform: perspective(1200px) rotateX(60deg) rotateZ(-35deg) translate3d(-100px, -200px, -500px);
}

.skew {
  position: absolute;
  top: 200px;
  left: 50%;
  --width: 140px;
  --height: 278px;
  --x: 0;
  --y: 0;
  --offsetX: calc(var(--x) * var(--width));
  --offsetY: calc(var(--y) * var(--height));
  transform: translate(var(--offsetX), var(--offsetY));
}
.skew:nth-child(5n + 1) {
  --x: -2;
}
.skew:nth-child(5n + 2) {
  --x: -1;
}
.skew:nth-child(5n + 3) {
  --x: 0;
}
.skew:nth-child(5n + 4) {
  --x: 1;
}
.skew:nth-child(5n + 5) {
  --x: 2;
}
.skew:nth-child(n + 1):nth-child(-n + 5) {
  --y: -2;
}
.skew:nth-child(n + 6):nth-child(-n + 10) {
  --y: -1;
}
.skew:nth-child(n + 11):nth-child(-n + 15) {
  --y: 0;
}
.skew:nth-child(n + 16):nth-child(-n + 20) {
  --y: 1;
}
.skew:nth-child(n + 21):nth-child(-n + 25) {
  --y: 2;
}
<div class="container">
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
</div>

Answer №3

To create the element, you need to follow the code below from your codepen: Modified html:

<div class="perspective">
<div class="skew">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>

modified css:

.perspective {
position: relative;
-webkit-perspective: 1242px; /* Safari 4-8 */
perspective: 1242px;
height: 2688px;
}

.front {
width: 1242px;
height: 2688px;
max-width: 100%;
max-height: 100%;
position: absolute;
transform: rotateX(45deg) rotateY(-60deg) translateZ(-80em);
background: url(https://i.imgur.com/DGAOsPz.png);
}

.skew {
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(80deg);
height: 2560px;
width: 100%;
}

You still need to add sides and back in the css, but you can test this code in your codepen to see how it functions.

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

Unusual actions observed with that particular button

Currently, I am working on creating a pomodoro clock using Codepen. While I acknowledge that my code isn't flawless yet, I have encountered a peculiar behavior with the Start button. When I click on it once, the timer starts as expected. However, if I ...

javascripthtml

The 'Transpose' object does not have a method for converting to a list

I've been exploring symbolic matrix calculations using sympy in search of a symbolic representation of matrix computations. I encountered some issues that I've simplified into this example, attempting to evaluate the result of exponentiating a sp ...

pythonmatrixsympysymbolic-math

What strategies should be employed to manage data-driven input in this particular scenario?

In the process of creating a small webpage, I have designed 2 navigation panels - one on the left and one on the right. The leftNav panel contains a list of different flower names. While the rightNav panel displays images corresponding to each flower. A ...

javascriptjqueryhtmlcssjson

What is the best way to include an external JavaScript file in a Bootstrap project?

I am brand new to front-end development and I'm attempting to create an onClick() function for an element. However, it seems like the js file where the function is located is not being imported properly. I've tried following some instructions to ...

javascripthtmljquerytwitter-bootstrap

Tips for designing a tilted CSS layout from scratch

I am looking to design a stylish interface using HTML & CSS. Here is the style I want to achieve: Currently, my interface looks like this: Although these are just reference images, you can see that my design does not have the same sleekness as the one in ...

cssskew

Is it feasible to transform HTML into EditorJS JSON format?

Is there a way to display an HTML string in editorJS? Show me from the following code example: <h1>The video src attribute</h1><video width="320" height="240" controls src="movie.ogg">Yourbrowser does not su ...

htmlreactjseditorjs

Maximizing space efficiency in Bootstrap 5

Hello there I have a query; I am currently utilizing Bootstrap 5 for my website, and it's working well. However, I would like Bootstrap to fill the entire page instead of just 80%; (Refer to image) https://i.sstatic.net/Iswmu.jpg <head> ...

htmlcssbootstrap-5

DOJO Dialogue Box Report - Problem

I'm currently facing a challenge with incorporating javascript into the dialog box of my application. Here is an example of the code I am struggling with - var profileDialog1 = new Dialog({ title: "Create Profile", style: "width: 700px;he ...

javascripthtmldojodialog

What is the best way to utilize the @Import CSS rule in my code?

After using CSS for a considerable amount of time, I have successfully utilized the @import rule in the past. However, I am currently encountering an issue with it on a new project. Is there anyone who can offer assistance? Here is the code: @import url(&a ...

htmlcss

Modify the stroke attribute of the <path> element using CSS

I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...

htmlcsssvg

Combine collapse and popover in Bootstrap 3 for enhanced functionality

I'm facing some issues trying to use the badge separately from the collapse feature. $(function (e) { $('[data-toggle="popover"]').popover({html: true}) }) $('.badge').click($(function (e) { e.stopPropagation(); }) ) Check o ...

javascriptjquerycsstwitter-bootstrap

What is the easiest way to include a copyright symbol in a React component?

I am trying to include the copyright symbol in a React component, but it doesn't seem to be working for me. function Footer() { return ( <footer> <p>&copy</p> </footer> ); } <p>&copy</p> ...

javascripthtmlreactjs

"Discover the secrets of flipping a webpage just like turning the pages of

I recently designed a basic website with 4 separate pages. The homepage includes navigation links for each page, such as - Page1 page2 Page3 Page4 My goal now is to create a feature where clicking on any of these links will open the corresponding page wi ...

htmlcss

Centering an icon vertically and introducing animation upon hovering over an image

I'm having difficulty with vertically centering an icon that drops down on image hover, and I want to make its transition smoother. Currently, it's dropping down too abruptly and no matter what transition property I apply (ease, ease-out, etc.), ...

htmlcsspositioncss-transitions

Is my jQuery code generating a large number of DOM objects?

I am currently developing a hex dumper in JavaScript to analyze the byte data of files provided by users. To properly display a preview of the file's data, I am utilizing methods to escape HTML characters as outlined in the highest-rated answer on thi ...

javascriptjqueryhtmlperformancegarbage-collection

How can the onclick attribute be modified in an HTML document?

I am looking to update the data-pro-bar-percent attribute of a progress bar from 80 to 100 when a specific link is clicked. The change in attribute needs to be as follows: data-pro-bar-percent="80" --> data-pro-bar-percent="100" This is the current HT ...

javascriptjqueryhtml

Modifying the image height in a column using Bootstrap and JSON data

My webpage is dynamically generating images from a JSON file through a JavaScript file. However, the images are displaying at different heights, and I want each column to adjust to the height of the image to eliminate any gaps. Particularly, data with the ...

javascripthtmljquerycssbootstrap-5

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...

javascripthtmlknockout.js

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Check out this template that I'm using. I've copied all the contents for the bower_components and dist folders, and made sure to link and require everything properly. There are no 404 errors, only status code 200. Here is a snippet of my code: ...

javascriptjquerycsstwitter-bootstrapadminlte

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

javascriptjqueryhtmlajaxgrid-layout