Using CSS Transforms in the Real World

CSS Conversion: A Powerful Tool to Solve Design Difficulties

This article will explore the power of CSS conversion in real-world applications, show how it can effectively solve various design challenges and create compelling visual effects. We will learn how to align elements vertically, create beautiful arrows, build load animations, and implement flip animations, etc.

CSS3 conversion became standard in 2012, and before that some browsers have provided support. Transformation allows you to easily transform web elements, such as rotation, scaling, or tilting elements, to achieve with just one line of code, which was difficult to achieve before. CSS conversion supports 2D and 3D transformations.

In terms of browser compatibility, all mainstream browsers support 2D conversion, including Internet Explorer 9 and later. 3D conversion is only partially supported in IE10 and later.

This article will not explain the basics of conversion. If you are not familiar with conversion, it is recommended that you read the introduction to 2D and 3D conversion first.

Vertical alignment of child elements

Vertical alignment of elements has always been a problem for web designers. Although it seems simple, there are actually many cumbersome techniques. Some methods recommend using display: inline and vertical-align: middle, others recommend using display: table and their associated styles. Of course, Flexbox or Grid can solve this problem, but for smaller components, conversion may be a simpler option.

When elements are highly variable, vertical alignment can be more complicated. CSS conversion provides an effective way to solve this problem. Here is a simple example with two nested divs:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

We set the width, height, and border for the parent element and add some spacing to make it more beautiful:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Then, use transform: translateY(-50%); to center the text vertically:

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

To avoid blurring, you can add perspective(1px):

.child {
  transform: perspective(1px) translateY(-50%);
}

In this way, even if the text length is different, the child elements can be perfectly vertically centered.

Create an arrow

Another interesting use case is to create scalable dialog arrows. You can create arrows using a graphics editor, but this is cumbersome and the bitmap image may not scale well.

Pure CSS solutions are more effective. Suppose we have a text box:

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Create an arrow with the ::before pseudo-element and convert it to an arrow shape using a rotation transformation:

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

This way, even if the page font size is changed, the arrows can maintain proportion.

Create "jump ball" loading animation

To indicate the loading process, you can create a jump ball loading animation using CSS animation and transformation:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Create the "rotator" loading animation using SVG (This part is similar to the original text. To avoid duplication, the detailed code is omitted here, and only the overview is retained)

SVG can be used to create more complex loading animations, such as spinners. By combining SVG elements, CSS animations, and transformations, you can create visually appealing loading effects.

Create a flip animation

Finally, let's look at an example of an image with a flip animation. When you hover your mouse over the picture, it flips over and displays its description. This is very useful for Instagram-like sites. (This part of the content is similar to the original text. To avoid duplication, the detailed code is omitted here and only the overview is retained)

Smooth flip animation effects can be achieved by using 3D conversion and transform-style: preserve-3d;, as well as the transition properties.

Precautions

While CSS conversion and animation are powerful, they should be used with caution to avoid overuse causing poor user experience.

Summary

This article shows how CSS conversion can be combined with other technologies to solve various design tasks. We learned how to align elements vertically, create scalable arrows, jump and rotate load animations, and implement flip animations. Remember, CSS should be used to enhance the user experience, not just show off.

(The content of the "Frequently Asked Questions about CSS Transforms" in the original text is highly consistent with the content of this article, so it is omitted here)

The above is the detailed content of Using CSS Transforms in the Real World. For more information, please follow other related articles on the PHP Chinese website!