Tips for utilizing CSS perspective to align a div so it seamlessly fits within an SVG laptop display

Question

Tips for utilizing CSS perspective to align a div so it seamlessly fits within an SVG laptop display

Confusion may arise from the question at hand. My goal is to utilize CSS to absolutely position a div with perspective in a way that resembles it being inside the laptop screen I created with an SVG.

I am under the impression that achieving this effect is possible by using a combination of perspective, rotateX(), rotateY(), but I haven't quite nailed it yet.

Take a look at this Codepen for reference.

Below is the relevant CSS code snippet:

.container {
    perspective: 500px;
}
.screenContents {
    transform: rotateX(10deg) rotateY(-10deg);
    /* 16:9 ratio to calculate size */
    --scale: 36;
    width: calc(16px * var(--scale));
    height: calc(9px * var(--scale));
    position: absolute;
    top: 30px;
    left: 300px;
}

Here's the HTML part:

<div class='container'>
    <div class='screenContents'>Screen Contents</div>
</div>
<img src='device.svg' />

I've experimented with setting perspective-origin, and using rotateZ() among other things.

Dimensions and Information Regarding the SVG

Here are some screen dimensions I derived from the SVG:

area: 1529 sq pixels

(width and height calculated from each corner point)

width: ~500px
height: ~350px

Coordinates of each point on the SVG screen I used for calculations:

top left: 382,514
top right: 882,503
bottom left: 312,187
bottom right: 816,151

The SVG is a traced image of a Google Pixel Go laptop with a 13.3" screen size and 16:9 ratio.

I believe these dimensions must play a role in the final calculations.

Conclusion

I aim to position a div in a manner that simulates it being displayed on the laptop screen. I'm seeking guidance or a brilliant mind to devise a solution. Feel free to experiment with the Codepen.

Calling all CSS experts out there, any help would be greatly appreciated!

html css perspective

Answer 1

Answer №1

Revise CSS Below

.wrapper {
/*   effect: 3D; */
}

.pageContent {
 transform: effect(3651px) rotateY(-30deg) rotateX(18deg) rotate(3deg);
 --size: 37;
 width: calc(16px * var(--size));
 height: calc(10px * var(--size));
}

Answer 2

Revise CSS Below

.wrapper {
/*   effect: 3D; */
}

.pageContent {
 transform: effect(3651px) rotateY(-30deg) rotateX(18deg) rotate(3deg);
 --size: 37;
 width: calc(16px * var(--size));
 height: calc(10px * var(--size));
}

Answer 3

Answer №2

I have developed a demonstration inspired by How to match 3D perspective of real photo and object in CSS3 3D transforms written by @szym that utilizes matrix calculation for precise alignment.

I have enhanced the demonstration to function as a standalone tool (possibly creating one in the future) where you can drag 4 points. The demo employs jQuery Terminal as a div, although any element can be used to fit it into an image. The tool will provide you with the necessary CSS to fit the element into an image, ensuring it is not stretched or distorted.

The core solution from that post involves the following matrix computation:

// Function to calculate the matrix3d that maps source points to destination.
function compute_transform(src, dst) {
  // src and dst should each have 4 points
  var count = 4;
  var a = []; // (2*count) x 8 matrix
  var b = []; // (2*count) vector

  for (var i = 0; i < 2 * count; ++i) {
    a.push([0, 0, 0, 0, 0, 0, 0, 0]);
    b.push(0);
  }

  for (var i = 0; i < count; ++i) {
    var j = i + count;
    a[i][0] = a[j][3] = src[i][0];
    a[i][1] = a[j][4] = src[i][1];
    a[i][2] = a[j][5] = 1;
    a[i][3] = a[i][4] = a[i][5] =
      a[j][0] = a[j][1] = a[j][2] = 0;
    a[i][6] = -src[i][0] * dst[i][0];
    a[i][7] = -src[i][1] * dst[i][0];
    a[j][6] = -src[i][0] * dst[i][1];
    a[j][7] = -src[i][1] * dst[i][1];
    b[i] = dst[i][0];
    b[j] = dst[i][1];
  }

  var x = numeric.solve(a, b);
  // matrix3d is homogenous coords in column major!
  // the z coordinate is unused
  var m = [
    x[0], x[3], 0, x[6],
    x[1], x[4], 0, x[7],
    0, 0, 1, 0,
    x[2], x[5], 0, 1
  ];
  return "matrix3d(" + m.join(',') + ')';
}

// The array should contain all 4 points
// of the rectangle on the image
var points = []; 

function transform_terminal() {
    var w = geometry.width + 20,
        h = geometry.height + 20;
    var transform = compute_transform(
        [
            [0, 0],
            [w, 0],
            [w, h],
            [0, h]
        ],
        points
    );
    function format(klass, left, top) {
        return `
.${klass} {
   left: ${left}px;
   top: ${top}px;
}`.trim();
    }
    const point_css = $('.point').map(function() {
        var {left, top} = $(this).position();
        var klas = $(this).attr('class').replace(/point /, ''); 
        return format(klas, left, top);
    }).get().join('\n');
    $('.output pre').html(`
.terminal {
    transform: ${transform};
}
/* optional control points */
${point_css}`.trim())
    term.css({
        '--transform': transform
    });
}

The code utilizes the numeric library to solve a linear equation for obtaining the matrix.

Check out the demo here: https://codepen.io/jcubic/pen/PojPbZz

Answer 4

I have developed a demonstration inspired by How to match 3D perspective of real photo and object in CSS3 3D transforms written by @szym that utilizes matrix calculation for precise alignment.

I have enhanced the demonstration to function as a standalone tool (possibly creating one in the future) where you can drag 4 points. The demo employs jQuery Terminal as a div, although any element can be used to fit it into an image. The tool will provide you with the necessary CSS to fit the element into an image, ensuring it is not stretched or distorted.

The core solution from that post involves the following matrix computation:

// Function to calculate the matrix3d that maps source points to destination.
function compute_transform(src, dst) {
  // src and dst should each have 4 points
  var count = 4;
  var a = []; // (2*count) x 8 matrix
  var b = []; // (2*count) vector

  for (var i = 0; i < 2 * count; ++i) {
    a.push([0, 0, 0, 0, 0, 0, 0, 0]);
    b.push(0);
  }

  for (var i = 0; i < count; ++i) {
    var j = i + count;
    a[i][0] = a[j][3] = src[i][0];
    a[i][1] = a[j][4] = src[i][1];
    a[i][2] = a[j][5] = 1;
    a[i][3] = a[i][4] = a[i][5] =
      a[j][0] = a[j][1] = a[j][2] = 0;
    a[i][6] = -src[i][0] * dst[i][0];
    a[i][7] = -src[i][1] * dst[i][0];
    a[j][6] = -src[i][0] * dst[i][1];
    a[j][7] = -src[i][1] * dst[i][1];
    b[i] = dst[i][0];
    b[j] = dst[i][1];
  }

  var x = numeric.solve(a, b);
  // matrix3d is homogenous coords in column major!
  // the z coordinate is unused
  var m = [
    x[0], x[3], 0, x[6],
    x[1], x[4], 0, x[7],
    0, 0, 1, 0,
    x[2], x[5], 0, 1
  ];
  return "matrix3d(" + m.join(',') + ')';
}

// The array should contain all 4 points
// of the rectangle on the image
var points = []; 

function transform_terminal() {
    var w = geometry.width + 20,
        h = geometry.height + 20;
    var transform = compute_transform(
        [
            [0, 0],
            [w, 0],
            [w, h],
            [0, h]
        ],
        points
    );
    function format(klass, left, top) {
        return `
.${klass} {
   left: ${left}px;
   top: ${top}px;
}`.trim();
    }
    const point_css = $('.point').map(function() {
        var {left, top} = $(this).position();
        var klas = $(this).attr('class').replace(/point /, ''); 
        return format(klas, left, top);
    }).get().join('\n');
    $('.output pre').html(`
.terminal {
    transform: ${transform};
}
/* optional control points */
${point_css}`.trim())
    term.css({
        '--transform': transform
    });
}

The code utilizes the numeric library to solve a linear equation for obtaining the matrix.

Check out the demo here: https://codepen.io/jcubic/pen/PojPbZz

Tips for utilizing CSS perspective to align a div so it seamlessly fits within an SVG laptop display

Answer №1

Answer №2

Similar questions

Problems with displaying Wordpress content on your web browser

"Encountering an issue with the live preview feature in Br

How to transform an image into a base64 string using Vue

What is the best way to add an active class to a clicked menu item that already has a class

Utilizing variable values in HTML and CSS to enhance a website's functionality

The second entry is not being styled by CSS, is there an issue with the code in this section?

Efficiently linking styles through computation in Angular

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

How can I prevent the <br/> tag from being included on every new line when exporting data to PDF in jQuery Datatable?

I am having trouble with the dropdown button in my Bootstrap - it just won't seem

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

The Main page is being graced by a floating Twitter Bootstrap video

display the hidden box contents when clicking the button within a PHP loop

Using CSS sprites to style text links

Creating dynamic height based on width using JavaScript

Angular navigation is inconsistent in its functionality

enhance the brilliance of elements at different intervals

Blend Image and Text with jQuery when Hovered Over

Switch up the image automatically after a short amount of time

Creating a <Box /> component in MaterialUI with styled components is a great way to customize the design and layout of your