2 d / 3 d conversion

This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

CSS transforms allow you to move, rotate, scale, and tilt elements.

The 2 d transformation

Primarily through the transform property, which is defined using a function.

Contains the following methods

Displacement of 1.

  • Translate () : translate (x) takes a parameter to represent the edgexThe axial displacementxPixel, which defaults to 0 along the Y-axis, takes two parameters translate (x,y) to represent the distance shifted along the X-axis and the distance shifted along the Y-axis
  • TranslateX (x), translateY(y)

Example:

<body>
    <div class="item"></div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
    }
    .item:hover{
        transform: translate(20px.20px);
    }
</style>
Copy the code

Effect:

2. Rotate

  • Rotate (Angle):** Rotate (Angle):** Has only one parameter, representing the selected Angle, in deg.
  • 2dSpace can only revolve around the center of the elementzShaft rotation
  • Parameters forisValues areshunClockwise rotation, isnegativeValues areThe inverseClockwise rotation

Such as:

<body>
    <div class="item"></div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
    }
    .item:hover{
        transform: rotate(90deg)
    }
</style>
Copy the code

Effect:

3. Zoom

  • scale():When a parameter indicates the same timexAxis andyThe axis scales in the same multiple in both directions, and the two parameters represent respectivelyxandyScale the axis by the corresponding multiple

Example:

<body>
    <div class="item"></div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
        background: powderblue;
    }
    .item:hover{
        transform:scale(1.5.2);
    }
</style>
Copy the code

Effect:

Deformation of 4.

  • **skew() : ** indicates the edgexShaft deformationxPoint of view,yShaft by default0, two parameters represent the edgexShaft deformationxThe Angle, alongyShaft deformationyThe point of view. Unit: deg (degrees)
  • Written separately: skewX(), skewY()

Example:

<body>
    <div class="item"></div>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
        background: powderblue;
    }
    .item:hover{
        transform:skew(20deg.30deg);
    }
</style>
Copy the code

Effect:

5.matrix()

The Matrix method has six parameters, including rotation, scaling, move (pan) and tilt functions.

It’s sort of the previous co-writing

The parameters are as follows:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Copy the code

6. Switch centers

Transform-origin can be used to change the origin of rotation, scaling, and deformation. The default value is center. You can set it to top bottom center left right. You can also use px, em, and percentage values.

For example: Change the conversion center from the upper-left corner. Then choose 90 degrees

    .item:active{
        transform-origin: left top;
        transform: rotate(90deg);
    }
Copy the code

Effect:

3 d conversion

Since it is 3D, we know it must be a three-dimensional, so there is a sense of space. We have the x, y, and z axes.

The following table lists all 3D transform attributes:

attribute describe
transform Apply 2D or 3D transformations to elements.
transform-origin Allows you to change the position of the converted element.
transform-style Specifies how nested elements are displayed in 3D space.
perspective Specifies the perspective of 3D elements.
perspective-origin Specify the bottom position of the 3D element.
backface-visibility Defines whether an element is visible when it is not facing the screen.

CSS 3D conversion method

function describe
matrix3d(n.n.n.n.n.n.n.n.n.n.n.n.n.n.n.n) Define a 3D transformation using a 4×4 matrix of 16 values.
translate3d(x.y.z) Define 3D transformation.
translateX(x) Define the 3D transformation, using only the values for the X-axis.
translateY(y) Define the 3D transformation using only the values for the Y-axis.
translateZ(z) Define the 3D transformation using only the values used for the Z-axis.
scale3d(x.y.z) Define the 3D zoom transformation.
scaleX(x) Define a 3D scale transformation by giving an X-axis value.
scaleY(y) Define a 3D scale transformation by giving a value for the Y axis.
scaleZ(z) Define a 3D zoom transform by giving a z-axis value.
rotate3d(x.y.z.angle) Define 3D rotation.
rotateX(angle) Defines a 3D rotation along the X axis.
rotateY(angle) Defines 3D rotation along the Y-axis.
rotateZ(angle) Defines a 3D rotation along the Z axis.
perspective(n) Defines the perspective view of the 3D transformation element.

1. Attributes applied to the parent element

  • Set 3D transform: transform-style: preserve-3d. The default value is flat, which indicates that 3D transform is not reserved

  • The distance of a 3D element from the view, or line of sight, in units of px

  • Position of observation point: perspective-origin: It is the same as the above transformation center, but it is 3d with a z-axis coordinate added.

2. Rotate

translate3d translateX translateY translateZ

  • Rotate3d (x, y, z, Angle) : alongx.y.zThree direction vector values determine the rotation of the coordinate pointangleThe Angle
  • backface-visibilityProperty defines whether an element is visible when rotated back to the screen, visible back, hidden back not visible
  • RotateX (Angle), rotateY(Angle), and rotateZ(Angle) : rotate the corresponding degree along the corresponding axis.

Example:

    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
        background: powderblue;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
Copy the code

Effects: This usually works well with animation.

We want to know what the effect is around the x, y, and z axes? I won’t be confused in the future

Displacement of 3.

translate3d translateX translateY translateZ

  • translate3d(x, y, z): Three arguments must be passed
  • TranslateX (x) : forisIs along theThe x axisOur shift to the right is zeronegativeIs along theThe x axisShift to the right
  • TranslateY (y) : forisIs along theyThe downward displacement is zeronegativeIs along theyUpward displacement
  • TranslateZ (z) : forisIs along theThe z axisThe displacement out of the screen is zeronegativeIs along theThe z axisIt moves into the screen

4. Zoom

scale3d scaleX scaleY scaleZ

  • scale3d(num, num, num): Three arguments must be passed
  • scaleX(x) scaleY(y) scaleZ(z), respectively representxandyAxis andzScale the axis by the corresponding multiple.

Write in the last

I think 2D/3D is still a lot of fun and can achieve a lot of beautiful effects, especially when combined with animation. 3D z-axis is difficult to demonstrate the effect, combined with animation is easier to reflect. The next post uses 3D with a little bit of animation to achieve album effects. Welcome big guy to read, like the support of the thumbs-up.

‘

You have to work really hard to look effortless.Copy the code