The base is held

If the soul of CSS3 lies in beautiful animation, then in the process of achieving cool animation, it must be necessary to transform. In transform, we can set the effects of movement, rotation, zoom and so on. Meanwhile, Transform also provides us with some family properties to deal with different scenes. You can design different dynamic effects if you think about it.

transform

The transform attributes are as follows:

Translate:

Translate related meaning
translate(x,y) The length of movement along the (x,y) axis can be set simultaneously
translateX(x) Only the X-axis movement length is set
translateY(y) Only the Y-axis movement length is set
translateZ(z) Only the z-axis movement length is set. This property can only be displayed in 3D scenes
translate3d(x.y.z) The length of movement along the (x,y,z) axis can be set separately

rotate

Rotate the relevant meaning
rotate(ndeg) Same as rotateZ.
rotateX(ndeg) Only set the X-axis rotation Angle, especially in 3D scenes
rotateY(ndeg) Only set the Y-axis rotation Angle, especially in 3D scenes
rotateZ(ndeg) Set only the z-axis rotation Angle
rotate3d(x.y.z.ndeg) The rotation Angle along axis (x,y,z) can be set separately. The first three parameters are0or1, meaning whether to set the rotation of an axis.

scale

Scale related meaning
scale(x.y) Separate definitions (x.y) the scale of the axis, and the value is0~n, if only one value is passed, then (x.yApply this value to all axes.
scaleX(x) Only x scale is set.
scaleY(y) Only y scale is set.
scaleZ(z) Only z-scale is set
scale3d(x.y.z) You can set the scaling multiple along the (x,y,z) axis.

skew

Scale related meaning
skew(x.y) Separate definitions (x.y) The tilt Angle of an axis, in unitsdeg, if only one value is passed, then (x.yApply this value to all axes.
skewX(x) Set only the x axis tilt Angle.
skewY(y) Set only the Y-axis tilt Angle.

perspective

Transform: Perspective (ARG), parameter unit: px, specifies the perspective distance of the 3D scene. This property can be set in the 3D box itself or in the parent element, which can successfully display the viewport distance effect.

There is also a global attribute, Perspective: arg, which is used in the same way as Transform: Perspective (ARg), but it is important to note that this global attribute must be set on the parent element of the 3D effect box that you want to display in order for the view-distance effect to display properly.

The family property

attribute meaning
transform-origin Sets the base point of the transform
transform-style Specifies how nested elements are displayed in 3D space.

Other related

attribute meaning
perspective Set the viewing distance of the 3D scene
perspective-origin Set the viewing point of the 3D scene
backface-visibility Sets whether the back of the element is visible, configurablevisible,hidden.

  • Perspective, which differs from Transform: Perspective (ARG), can only be set on the parent element of the 3D box

  • Backface-visibility is very important when you use a rotating card. A rotating card displays both sides. By default, after the front card is rotated, the back of the card will be perspectised, affecting the display of the back card.

    Example:

    Not set:

    After the Settings:

The sample

Now that you know the basics of morphing, you can use these properties to your imagination, which will be implemented using Transform in the following example.

First, form effect

Note that input[type=”text”] cannot add pseudo-classes.

<style>
  main {
    width: 80%;
  }
  form {
    width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: #2c3e50;
  }
  span {
    width: 60px;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    letter-spacing: 2px;
    color: white;
  }
  label {
    display: block;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inputBox {
    display: inline-block;
    position: relative;
    width: 150px;
    min-height: 30px;
    border-radius: 5px;
    margin-left: 8px;
    background: white;
    overflow: hidden;
    transition: 0.8 s;
  }
  input {
    display: inline-block;
    min-height: 30px;
  }
  .after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2.1 px.;
    border-radius: 2px;
    background: linear-gradient(
      to right,
      white,
      #e74c3c.#e67e22.#f1c40f.#bdc3c7.#1abc9c.#3498db.#9b59b6,
      white
    );
    transform: translateX(-100%);
    transition: 0.8 s;
  }
  .inputBox:hover {
    transform: scale(1.1);
  }
  .inputBox:hover .after {
    transform: translateX(0);
  }
  button {
    width: 60px;
    height: 40px;
    margin: 10px;
    color: white;
    background: transparent;
    border: 2px solid white;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    transition: 0.8 s;
  }
  button > span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: transparent;
    transform: translate(-50%, -50%);
  }
  button::after {
    content: "";
    width: 98%;
    height: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: 0.8 s;
  }
  button:hover {
    transform: scale(1.1);
  }
  button:hover:after {
    transform: skewX(45deg) translate(-10px, -50%);
    background: #e74c3c;
  }
</style>
<body>
  <main>
    <form action="#">
      <label>
        <span>User name:</span>
        <div class="inputBox">
          <input type="text" />
          <div class="after"></div>
        </div>
      </label>
      <label>
        <span>Password:</span>
        <div class="inputBox">
          <input type="text" />
          <div class="after"></div>
        </div>
      </label>
      <button><span>Login</span></button>
    </form>
  </main>
</body>
Copy the code

3D

For THE 3D effect, we need to make some presets, and only with these presets can we have visual effect.

transform-style

Transform-style: Specifies how nested elements are displayed in 3D space.

Attribute values meaning
flat Child elements will not retain their 3D position.
preserve-3d The child element will retain its 3D position.

When we set transform-style: preserve-3D, the viewport distance effect will only occur when the element position is changed later.

Of course, we also need to configure the viewport distance 👇.

perspective

We can define viewport distances in two ways, both in px:

  1. perspective: arg
  2. transform: perspective(arg)

But it is worth noting that the difference between the two, the above has been explained, here is no longer repeated, but in actual use, which is better?

I personally recommend using Perspective over Transform: Perspective (ARG) for the following reasons:

When there are many trigger options, the Transform: Perspective (ARG) is reconfigured in the stylesheet at trigger time to ensure viewport effects.

Because the stylesheet is applied when the animation is triggered, if the Transform: Perspective (ARG) is not configured, you will have viewport effects before the animation is triggered, but not after.

To avoid this, we simply set the perspective on the parent box, which is not part of the Transform, so we don’t have to worry about the transform reconfiguration when it is triggered later.

Once we have the presets in place, we are ready to show the 3D effect:

  • (Z) Axis related special effects are reflected

  • Some (x,y) effects are more obvious

Let’s compare:

TranslateZ effect without preset

That’s right! No effect, z-axis effect cannot be reflected because the element 3D position is not preserved.

Two, after the configuration preset

What? Not so effective? Let’s do a simple rotation.

​

The case shows

Let’s show a case study to get more familiar with 3D animation

<style>
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  body {
    width: 100vw;
    min-height: 100vh;
    background-color: #7f8c8d;
  }
  main {
    width: inherit;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  section {
    width: 400px;
    height: 400px;
  }
  .box3D {
    width: inherit;
    height: inherit;
    border: 2px solid white;
    border-radius: 5px;
    transform-style: preserve-3d;
    transform: perspective(900px) rotate3d(0.1.0.45deg);
    transition-duration: 1s;
    transition-delay: 1s;
    position: relative;
  }
  .box3D > div {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    transition: 1s;
  }
  .box3D > div:nth-of-type(1) {
    background: #badc58;
  }
  .box3D > div:nth-of-type(2) {
    background: #ff7979;
  }
  .box3D > div:nth-of-type(3) {
    background: #ffbe76;
  }
  .box3D > div:nth-of-type(4) {
    background: #22a6b3;
  }

  .box3D:hover {
    transform: perspective(900px) rotate3d(0.1.1.225deg);
  }
  .box3D:hover > div:nth-of-type(1) {
    transform: translate3d(-50%, -50%.100px);
  }
  .box3D:hover > div:nth-of-type(2) {
    transform: translate3d(-50%, -50%, -200px);
  }
  .box3D:hover > div:nth-of-type(3) {
    transform: translate3d(-50%, -50%, -100px);
  }
  .box3D:hover > div:nth-of-type(4) {
    transform: translate3d(-50%, -50%.200px);
  }
</style>
<body>
  <main>
    <section>
      <div class="box3D">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </section>
  </main>
</body>
Copy the code

  • Of course, I prefer to use perspective to set viewports in the parent elements of a 3D box.

  • Although this example only triggers one hover for a 3D box (.box3d), if I want the animation to be triggered for click, form submission, and so on, I need to configure transform: Perspective (900px) repeatedly, both in CSS and JS.

Make the following changes

section { width: 400px; height: 400px; perspective: 900px; // Configure the viewport in the parent element}.box3d {... transform: rotate3d(0, 1, 0, 45deg); Transform :perspective(900px)... }Copy the code

You don’t have to configure the Transform: Perspective (900px) option again when you set out later.

.box3D:hover {
    transform: rotate3d(0, 1, 1, 225deg);
 }
Copy the code

The effect is the same as before, and it also reduces code redundancy.

The last

Original article, writing is limited, talent and learning shallow, if the article is not straight, speed to inform.

This is the end of this article, I hope to help you, I am Ashun, a college student, determined to become a senior front-end engineer, welcome to communicate and learn together. Please stay tuned for more updates