Don't forget to strip off the height attribute once the transform is

Question

Don't forget to strip off the height attribute once the transform is

Utilizing the transform property:

.parent {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}


.first {
  height: 100px;
}
    
.second {
  height: 100px;
  transform: translateY(-50%);
}

<div class="parent">
    <div class="first"></div>
    <div class="second"></div>
</div>

Despite using transform: translateY(-50%);, the parent div's height remains at 200px instead of adjusting due to lack of content. How can this extra space be removed solely utilizing the transform property?

Link to example

html css transform

Answer 1

Answer №1

translate solely alters the visual position of an element without impacting the layout of other elements on the page.

To achieve the desired outcome, using a negative margin may be the easiest solution.

.parent {
  border: 1px solid purple;
}

.first {
  height: 100px;
  background: yellow;
}

.second {
  height: 100px;
  margin-top: -50px;
  background: salmon;
}

<div class="parent">
  <div class="first">
    First
  </div>
  <div class="second">
    second
  </div>
</div>

Answer 2

translate solely alters the visual position of an element without impacting the layout of other elements on the page.

To achieve the desired outcome, using a negative margin may be the easiest solution.

.parent {
  border: 1px solid purple;
}

.first {
  height: 100px;
  background: yellow;
}

.second {
  height: 100px;
  margin-top: -50px;
  background: salmon;
}

<div class="parent">
  <div class="first">
    First
  </div>
  <div class="second">
    second
  </div>
</div>

Answer 3

Answer №2

One way to achieve this effect is by utilizing SVG along with the <animateTransform> element.

Answer 4

One way to achieve this effect is by utilizing SVG along with the <animateTransform> element.

Don't forget to strip off the height attribute once the transform is

Answer №1

Answer №2

Similar questions

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

In a jQuery application, the action of adding text from an input field to a div is triggered by clicking a

Is there anyone available to assist me with this contact validation form?

Utilize Css3 MediaQueries to nudge @Media switch for hyperlinks

Select from a variety of backgrounds using the dropdown menu on the site

Validating Forms with Jquery across Various Inputs

What is the best way to position this container in the center of the

Is organizing a table into separate sections helpful?

Set the dropdown item as selected using AngularJS

Steps to incorporate Ajax into current pagination system built with PHP and Mysql

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

Incorporating JSON data into an HTML table

What impact do varying screen sizes have on the width of CSS?

What is the best way to display a bitmap image in a Div, Span, Label, etc. on an Asp.Net page without using a Handler?

Adjust website layout for screens less than 320px in width

Resizing background images to their original size using jQuery

Ensure that three spans are precisely aligned to occupy a single line

Ways to manage the gap among flex items

What is the best way to reach nested iframes?

Having trouble initiating an AJAX call in Django and returning values to my form