Note source: Silicon Valley Web front-end HTML5&CSS3 beginners zero basic entry complete version

[TOC]

Deformation: translation, rotation and scaling

Morphing is using CSS to change the shape or position of an element

The distortion does not affect the layout of the page

Transform is used to set the morphing effect of the element

1, the translation

• translateX()I’m going to shift along the direction
• translateY()It’s shifted in the y direction
• translateZ()Shift and shift elements along the z axis

Percentages are calculated relative to themselves

Comparison of several horizontal and vertical ways to center

1. The way of absolute positioning

   /* This center only applies to the size of the element */
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   Copy the code

2. Table – cell

   /* Table-cell mode has some limitations */
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   Copy the code

3. Transform the way

   /* transform */
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   Copy the code

To the effect

div {
    float: left;
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px 50px auto 50px;
    transition: all .3s;
}

div:hover {
    box-shadow: 0 0 10px rgba(0.0.0.2);
    transform: translateY(-5px);
}
Copy the code

2. Z-axis translation

Z-axis translation, adjust the position of the element on the Z-axis, the normal situation is to adjust the distance between the element and the human eye, the greater the distance, the closer the element is to the human

Z-axis translation belongs to the stereo effect (near large and far small), by default, the page does not support perspective, if you need to see the effect must set the page distance

Perspective effect

html {
    background-color: rgb(71.44.32);
    perspective: 800px;
}

.box {
    width: 200px;
    height: 300px;
    background-color: silver;
    margin: 100px auto;
    transition: all .3s;
}

.box:hover {
    box-shadow: 0 0 10px rgba(0.0.0.2);
    transform: translateZ(200px);
}
Copy the code

3, rotation,

An element can be rotated by a specified Angle along x, y, or z by rotation

• rotateX()
• rotateY()
• rotateZ()

/ * the transform: rotateY turn (0.5); * /
transform: rotateY(180deg);
Copy the code

4, scaling

A function that scales an element

• scalex()Horizontal scaling
• scaleY()Vertical scaling
• scale()Scaling in both directions

.box {
    height: 200px;
    width: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition: 2s;
}

.box:hover {
    /* transform: scaleX(2); * /
    /* transform: scaleY(2); * /
    transform: scale(2);
    /* The origin of the deformation */
    transform-origin: 0 0;
}
Copy the code

5, in actual combat

The duck table

The HTML code

<div class="clock">
    <div class="hour-wrapper">
        <div class="hour"></div>
    </div>
    <div class="minute-wrapper">
        <div class="minute"></div>
    </div>
    <div class="second-wrapper">
        <div class="second"></div>
    </div>
</div>
Copy the code

CSS code

.clock {
    width: 500px;
    height: 500px;
    background-image: url("Assets/duck table /clock. PNG");
    background-image: url("Assets/duck /clock_duck.jpg");
    background-size: cover;
    margin: 100px auto;
    position: relative;
}

.clock>div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.clock>div>div {
    height: 50%;
    margin: 0 auto;
}

/ * clockwise * /
.hour-wrapper {
    height: 60%;
    width: 60%;
    animation: clock-run 720s infinite;
}

.hour {
    width: 8px;
    background-color: black;
}

/ * minute hand * /
.minute-wrapper {
    height: 75%;
    width: 75%;
    animation: clock-run 60s steps(60) infinite;
}

.minute {
    width: 4px;
    background-color: black;
}

/ * the second hand * /
.second-wrapper {
    height: 90%;
    width: 90%;
    animation: clock-run 1s steps(60) infinite;
}

.second {
    width: 2px;
    background-color: red;
}

@keyframes clock-run {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg); }}Copy the code

Avengers

The HTML code

<div class="cube">
    <div class="surface1"></div>
    <div class="surface2"></div>
    <div class="surface3"></div>
    <div class="surface4"></div>
    <div class="surface5"></div>
    <div class="surface6"></div>
</div>
Copy the code

CSS code

html {
    perspective: 800px;
}

.cube {
    height: 200px;
    width: 200px;
    margin: 200px auto;
    position: relative;
    /* Set the 3d deformation effect */
    transform-style: preserve-3d;
    animation: cube-rotate 12s infinite linear;
}

.cube div {
    height: 200px;
    width: 200px;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    /* Sets transparency for the element */
    opacity:.85;
}

.surface1 {
    background-image: url("/assets/ Avengers /1.jpg");
    transform: translateX(-100px) rotateY(90deg);
}

.surface2 {
    background-image: url("/assets/ Avengers /2.jpg");
    transform: translateX(100px) rotateY(90deg);
}

.surface3 {
    background-image: url("/assets/ Avengers /3.jpg");
    transform: translateY(-100px) rotateX(90deg);
}

.surface4 {
    background-image: url("/assets/ Avengers /4.jpg");
    transform: translateY(100px) rotateX(90deg);
}

.surface5 {
    background-image: url("/assets/ Avengers /5.jpg");
    transform: translateZ(-100px);
}

.surface6 {
    background-image: url("/assets/ Avengers /6.jpg");
    transform: translateZ(100px);
}

@keyframes cube-rotate {
    from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    to {
        transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn); }}Copy the code