Thiết kế website giá rẻ

Question

How can I properly compute the center value of the viewpoint(“0 0 1200 800”)

I want to assign the value in translate(${translateXValue}px, -300px) rotateY(180deg) scale(1.5);* in my JS.

I’m expecting the box to be in the center of the viewpoint(blue background) on click. my Y value is static to -300px since im not sure how to dynamically compute the x and y

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Horizontal postion</title>
<style>
.a {
  height: 100vh;
  width: 100%;
}

div {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
</style>
</head>
<body>
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" class="a p" viewBox="0 0 1200 800">
</svg>

<script>
const foreignObjects = [
  {
    x: 0,
    y: 0,
    width: "100%",
    height: "100%",
    content: '<div xmlns="http://www.w3.org/1999/xhtml"></div>',
    style: {
      backgroundColor: "blue"
    }
  },
  {
    //Whole page
    x: 100,
    y: 0,
    width: 1000,
    height: 750,
    content: '<div class="container"></div>',
    style: {}
  }
];

const boxes = [
  {
    y: -50,
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ccc"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ddd"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ccc"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ddd"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ccc"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ddd"
    }
  },
  {
    class: "box",
    style: {
      width: "110px",
      height: "110px",
      margin: "0 5px",
      backgroundColor: "#ccc"
    }
  },
];

function applyStyles(element, styles) {
  for (const [key, value] of Object.entries(styles)) {
    element.style[key] = value;
  }
}

function renderBoxes(container) {
  boxes.forEach(box => {
    const div = document.createElement('div');
    div.className = box.class;
    applyStyles(div, box.style);
    let clicked = false;

    div.addEventListener('click', () => {
      if (clicked) {
        // Reset the transformation
        div.style.transform = 'none';
        clicked = false;
      } else {
        // Calculate the translation needed to move the element to the top and center of the viewport
        const translateXValue = (600 / 2);
        // Apply the transformation
        div.style.transform = `translate(${translateXValue}px, -300px) rotateY(180deg) scale(1.5)`;
        clicked = true;
      }
    });

    container.appendChild(div);
  });
}

function renderForeignObjects() {
  const svg = document.getElementById('mySvg');

  foreignObjects.forEach(obj => {
    const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
    foreignObject.setAttribute('x', obj.x);
    foreignObject.setAttribute('y', obj.y);
    foreignObject.setAttribute('width', obj.width);
    foreignObject.setAttribute('height', obj.height);

    const div = document.createElement('div');
    div.innerHTML = obj.content;
    applyStyles(div.firstChild, obj.style);

    if (div.firstChild && div.firstChild.classList.contains('container')) {
      renderBoxes(div.firstChild);
    }

    foreignObject.appendChild(div);
    svg.appendChild(foreignObject);
  });
}

// Call the function to render foreign objects
renderForeignObjects();

</script>
</body>

</html>

Thiết kế website giá rẻ

Danh mục

How can I dynamically center my boxes on click using transform: translate(x,y)?