Image overflow in div and image flip in CSS3, divcss3

Image overflow in div and image flip in CSS3, divcss3

If you set a div to hold more than two images, if you do not set the width and height of the div, the image will overflow.

We know that a div can be opened by an image in width and height. That is to say, if only one image is placed, the width and height of the div are not set, by default, the width and height of a div are the width and height of an image.

However, if you want to put multiple images into one div, this can also affect the overall layout of the back, which is worse than setting the off-chip spacing and when you need to hide the image.

After trying to find that if the width set to the div is too small to accommodate all the images, the picture will be arranged vertically by default, then overflow occurs, you can use overflow: hidden; style to hide the overflow part.

 

Sometimes, we need to overflow this part. For example, to achieve the two-dimensional flip effect of an image, we need to use the backface-visibility: hidden style of CSS3; to hide the first image in the div, and display only the image facing the screen when you flip it.

 

Backface-visibility: hidden; differences from overflow: hidden and display: none

Display: none hides the element and does not occupy any space on the webpage. This element disappears completely (invisible or invisible)

Overflow: hidden hides the excess elements, that is, when setting this attribute, it will cut out the excess parts based on the width and height you set. Other content can be placed in the area where the excess elements are removed, that is to say, the overflow part is no longer occupied

Backface-visibility: hidden; hides the layer where the element is located, but does not see the element, but the position still exists.

 

CSS3 transform: rotateX (angle) rotateY (angle) rotateZ (angle );

This is the three attributes of Two-Dimensional Image flip added in CSS3. When using this feature, you should pay attention to browser compatibility issues.

The CSS3 document explains how to turn elements around three axes to a certain angle.

However, we can find that this angle is not necessarily a conversion angle, but also an angle relative to the starting position of the element,

For example, transform: rotateY (0deg); does not convert the element around the Y axis to 0 °, which is equivalent to no conversion.

After an attempt, it is found that if a picture is first transform: rotateY (180deg); then transform: rotateY (0deg);, it will return to the position where it was not initially converted to 180 °.

So here 0 ° is not actually converted to 0 °, but another 180 ° offset relative to the previous 180 °.

When one of the two images stacked in the same div is flipped, it will rotate with its midline by default, so that if it rotates around the Y axis, it will be staggered with the other image, if you convert the image to 180 °, it will be before or after another image.

 

Absolute Positioning Relative positioning and fixed positioning:

Absolute positioning:

Absolute positioning disconnects the element from the document stream. Absolute positioning is relative to the ancestor element closest to the element. (generally, relative positioning of the ancestor element is also enabled when the absolute positioning of the child element is enabled)

Absolute positioning will change the nature of the element, and the inline element will become a block element. The width and height will be extended by the content.

If you do not set an offset for an element that enables absolute positioning, the element will only be moved away from the document stream.
If positioning is not enabled for all ancestor elements, the positioning is relative to the browser window.

Relative positioning:

Does not remove elements from document streams

Fixed positioning:

Fixed positioning is enabled when the position attribute of an element is set to fixed.

Fixed positioning is also an absolute positioning. Most of its features are the same as absolute positioning.
The difference is that the fixed positioning will always be relative to the browser window positioning.

Generally, If you enable absolute positioning of child elements, you must enable relative positioning of parent elements.

 

Margin:

When the outer margin of an element is a positive value, the element next to it will be moved. When it is set to a negative value, it will move itself, and it is mostly set to a negative value.

 

The above are my personal notes. If you have any mistakes, please correct them.