(11) 2020-12-15 (transition), 2D conversion (zoom, displacement, rotation, tilt)

1. Browser prefix

w3c
Members: major Internet giants
It sets the rules of the whole platform and supervises the whole process.

What we are learning now is css2.1 But to css3 Compatibility should be considered when.

Browser prefix

Google Apple webkit-
Firefox moz-
IE -ms-
Oupeng-o-

2. transition

Transition transition
Before: the element switches directly from one state to another (hover). It is completed instantaneously from the start state to the end state, and the intermediate process is almost invisible.
css3 adds the transition attribute, which can realize the smooth transition between different states of elements.
(1) Transition property: Specifies the properties of the transition. All specifies that all attributes have a transition effect. (required)
(2) Transition duration: the transition time. The unit can be s or ms. (required)
(3) Transition delay: Specifies the delay time for the transition to take effect.
(4) Transition timing function: specifies an excessive motion curve.
Slow down slowly
linear uniform velocity
Ease in acceleration
Ease out deceleration
Ease in out
transition compound writing
(transition attribute completion time motion curve delay time)
transition: all 3s linear 1s;
Generally, the transition can be set only when there are attributes with value / intermediate status, such as width and height

example

1. Xiaomi Icon

<body>
    <!-- window -->
    <div class="mi">
        <div class="mi-son home"></div>
        <div class="mi-son logo"></div>
    </div>
</body>

*{
    margin: 0;
    padding: 0;
}

.mi{
    margin: 0 auto;
    margin-top: 200px;
    background-color: #ff6700;
    position: relative;
    overflow: hidden;
}
div{
    width: 49px;
    height: 49px;
}
.mi-son{
    position: absolute;
    top: 0;
    transition: all .3s;
}
.home{
    left: -49px;
    background: url("../img/mi-home.png") no-repeat;
}
.logo{
    left: 0;
    background: url("../img/mi-logo.png") no-repeat;
}
.mi:hover .home{
    left: 0px;
}
.mi:hover .logo{
    left: 49px;
}

2. Xiaomi icon (pseudo element writing method)

<body>
    <!-- window -->
    <div class="mi">
    </div>
</body>

*{
    margin: 0;
    padding: 0;
}

.mi{
    margin: 0 auto;
    margin-top: 200px;
    background-color: #ff6700;
    position: relative;
    width: 49px;
    height: 49px;
    overflow: hidden;
}

.mi::after,.mi::before{
    content: "";
    display: block;
    width: 49px;
    height: 49px;
    position: absolute;
    top: 0;
    transition: all .3s;
}
.mi::before{
    left: -49px;
    background: url("../img/mi-home.png") no-repeat;
}
.mi::after{
    left: 0;
    background: url("../img/mi-logo.png") no-repeat;
}
.mi:hover::before{
    left: 0px;
}
.mi:hover::after{
    left: 49px;
}

3. 2D conversion (transform attribute)

transform attribute

Multiple transformations can be written after transform, but the writing order is different and the effect is different.
about
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
The first will move first and then rotate
The second kind will rotate first and then displace.
All conversion attributes can only be added to block level elements, and inline elements are invalid.

(1) scale

Zoom: zoom in and out.
Format:
transform: scale(x,y);
x: Represents the scaling factor in the horizontal direction
y: Represents the scaling factor in the vertical direction.
x. y is a number. For example, 2 represents twice.
If you write only one value, it represents equal scaling.
It will not change the true width and height, nor will it affect the box next to it.

(2) Displacement (translate)

Format:
Tramform: translate (horizontal displacement, vertical displacement)
Attribute value:
(1) Positive px: down or right.
(2) The percentage is based on the width and height of the box itself.
When only one value is written, it is the horizontal displacement.

(3) rotate

Format: transform: rotate (rotation angle deg)
Unit: deg

(4) Transform origin

Format: Transform origin: (horizontal coordinate, vertical coordinate)
Attribute value:
(1)px
(2) Percentage: according to the width and height of the box. 50%=center
(3) Words: left center, etc

(5) skew

Format: transform: skew (horizontal tilt angle deg, vertical tilt angle deg)
The unit is deg,
Positive values are clockwise and negative values are counterclockwise.
All conversion attributes can only be added to block level elements, and inline elements are invalid.
1. Function
Change the shape of the element in the page.
2. Grammar
Attributes: transform
Function:
1. skew(xdeg) tilts horizontally by a specified number of degrees. The value of X is positive, the x-axis does not move, and the y-axis tilts counterclockwise by a certain angle. X value is negative, X axis does not move, Y axis tilts clockwise by a certain angle skew(30deg) 2. skew(xdeg,ydeg) ydeg: longitudinal tilt degree y value is positive, Y axis does not move, X axis tilts clockwise by a certain angle, y value is negative, Y axis does not move, X axis tilts counterclockwise by a certain angle 3. skewX(xdeg) 4. skewY(ydeg)

    <div class="box">
        <span>Hello</span>
        <img src="img/dw.jpg" alt="">
    </div>

    <style>
        .box{
            margin: 0 auto;
            margin-top: 200px;
            width: 600px;
            height: 600px;
            transform: skew(45deg,0deg);
        }
        img{
            width: 100%;
        }
       
    </style>

The X-axis tilts 45 degrees, which is a positive value. The picture effect is that it does not move horizontally and rotates 45 degrees counterclockwise in the Y-axis direction.

(6) Examples

1. Playing cards

    <style>
        .box{
            width: 200px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
            
        }
        img{
            transition: transform 1.5s;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: center bottom;
            box-shadow: 0 0 3px #666;
        }
        .box:hover img:nth-child(13){
            transform:rotate(60deg)
        }
        .box:hover img:nth-child(1){
            transform:rotate(-60deg)
        }
        .box:hover img:nth-child(12){
            transform:rotate(50deg)
        }
        .box:hover img:nth-child(2){
            transform:rotate(-50deg)
        }
        .box:hover img:nth-child(11){
            transform:rotate(40deg)
        }
        .box:hover img:nth-child(3){
            transform:rotate(-40deg)
        }
        .box:hover img:nth-child(10){
            transform:rotate(30deg)
        }
        .box:hover img:nth-child(4){
            transform:rotate(-30deg)
        }
        .box:hover img:nth-child(9){
            transform:rotate(20deg)
        }
        .box:hover img:nth-child(5){
            transform:rotate(-20deg)
        }
        .box:hover img:nth-child(8){
            transform:rotate(10deg)
        }
        .box:hover img:nth-child(6){
            transform:rotate(-10deg)
        }
        
    </style>
</head>
<body>
    <div class="box">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
        <img src="img/red.jpg" alt="">
    </div>
</body>

2. Small rocket

    <style>
        body{
            background-color: #000;
        }
        .box{
            width: 101px;
            height: 190px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .rocket{
            transition: transform 3s ease-in;
            transform: translate(0,0);
        }
        .box:hover .rocket{
            transform:translate(1700px,-700px) rotate(50deg);
            /* transform:rotate(45deg) translate(700px,-1400px) ; */
        }
    </style>
</head>
<body>
    <div class="box">
        <img class="rocket" src="img/rocket.png" alt="">
    </div>

3. Tilt case

    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        ul{
            width: 430px;
            height: 40px;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
        }
        .box>li{
            float: left;
            width: 100px;
            font-size: 18px;
            height: 40px;
            background-color: cadetblue;
            line-height: 40px;
            text-align: center;
            margin:0px 5px;
            transform: skew(-30deg);
        }
        .box>li>span{
            display: block;
            transform: skew(30deg);
        }
        ul li:first-child{
            margin-left: -12px;
            padding-left: 12px;
        }
        ul li:last-child{
            float: right;
            margin-left: -2px;
            margin-right: -12px;
            padding-right: 12px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li><span>Website home page</span></li>
        <li><span>Company profile</span></li>
        <li><span>contact information</span></li>
        <li><span>Company address</span></li>
    </ul>
</body>

4. Transition (displacement)

    <title>Document</title>
    <style>
    div{
        background-image: url(./img/bg.png);
        width: 60px;
        height: 70px;
        float: left;
        transition: all 0.5s;
    }
    div:nth-child(1){
        background-position: 0 -70px;
    }
    div:nth-child(2){
        background-position: -60px -70px;
    }
    div:nth-child(3){
        background-position: -120px -70px;
    }
    div:nth-child(4){
        background-position: -180px -70px;
    }
    div:nth-child(5){
        background-position: -240px -70px;
    }
    div:nth-child(6){
        background-position: -300px -70px;
    }
    div:nth-child(1):hover{
        background-position: 0 0;
    } 
    div:nth-child(2):hover{
        background-position: -60px 0;
    }
    div:nth-child(3):hover{
        background-position: -120px 0;
    } 
    div:nth-child(4):hover{
        background-position: -180px 0;
    } 
    div:nth-child(5):hover{
        background-position: -240px 0;
    } 
    div:nth-child(6):hover{
        background-position: -300px 0;
    } 
    
    </style>
</head>

<body>
    
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
</body>

5. Transition (rotation)

Implementation process:
1. First locate the box top and box bottom to the upper left corner of the father. Top is 0 and left is 0.
2. Rotate the box top and box bottom by 45deg.
3. Fine tune the top value and horizontal displacement distance of box top and box bottom after mouse hover through the browser (annotate first, and then add it to the hover. Note that the rotation angle of 45 degrees should also be written before the displacement)
4. Fine tune the top value and horizontal displacement distance of box top and box bottom before hovering through the browser (add them to box top and box bottom respectively. Note that the rotation angle of 45 degrees should also be written in front of the displacement)
5. Then add 3 to the hover and set the father content overflow to hide
6. Add transition:all time to the block that needs to be changed.
7. See the effect.

    <title>Document</title>
    <style>
        .container {
            position: relative;
            margin: 0 auto;
            margin-top: 300px;
            border: 1px solid rgb(199, 197, 197);
            width: 380px;
            height: 420px;
        }

        .father {
            position: absolute;
            width: 300px;
            height: 380px;
            top: 50%;
            margin-top: -190px;
            left: 20px;
            /* Overflow content hiding */
            overflow: hidden;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
        }

        .box-center {
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 0px;
            width: 300px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            text-align: center;
            color: white;
            z-index: 10;
            /* Set the box height to 0 */
            overflow: hidden;

            /* Middle picture block:
            Set the style when the mouse is not hovering. The rotation angle is 50deg and the box height becomes 0 In addition, in the transformation process, who changes adds transition to who*/
            transform: rotate(50deg);
            transition: all 0.5s;
            height: 0;
        }
        .box-center-content {
            height: 120px;
            border-top: 4px solid grey;
            text-indent: 32px;
        }
        /* Middle picture block:
            Set the style when the mouse hovers. The rotation angle is 0deg, and the box height becomes the normal height of 200px*/
            .father:hover .box-center {
            transform: rotate(0deg);
            height: 200px;
        }


 /* Implementation process:
1, First locate the box top and box bottom to the upper left corner of the father. Top is 0 and left is 0.
2,Rotate the box top and box bottom by 45deg.
3,Fine tune the top value and horizontal displacement distance of box top and box bottom after mouse hover through the browser (annotate first, and then add it to the hover. Note that the rotation angle of 45 degrees should also be written before the displacement)
4,Fine tune the top value and horizontal displacement distance of box top and box bottom before hovering through the browser (add them to box top and box bottom respectively. Note that the rotation angle of 45 degrees should also be written in front of the displacement)
5,Then add 3 to the hover and set the father content overflow to hide
6,Add transition:all time to the block that needs to be changed.
7,See the implementation effect*/

        .box-top,
        .box-bottom {
            position: absolute;
            left: 0;
            background-color: rgba(255, 0, 0, 0.5);
            width: 300px;
            height: 500px;


            /* Set the display process for box top and box bottom */
            transition: all 0.5s;           
        }
        /* The position before hovering the mouse should be outside the parent box, and the overflow is not visible*/
        .box-top {
        transform:rotate(45deg) translate(-386px);
        top: -65px;
        }

        .box-bottom {  
            transform:rotate(45deg) translate(386px);     
            top: -47px;    
        }
        /* The position after hovering is visible in the parent box father*/
        .father:hover .box-top {
        transform:rotate(45deg) translate(-112px);
        top: -65px;
        }

        .father:hover .box-bottom {  
            transform:rotate(45deg) translate(112px);     
            top: -47px;    
        } 
    </style>
</head>

<body>
    <div class="container">
        <div class="father">

            <img src="./img/bc1.jpg" alt="">


            <div class="box-center">
                <div class="box-center-header">
                    <h1>Audrey Hepburn·Hepburn</h1>
                </div>
                <div class="box-center-content">
                    <p>Audrey Hepburn·Hepburn( Audrey Hepburn，1929 May 4, 1993 - January 20, 1993), born in Brussels, Belgium, British actress.</p>
                </div>
            </div>
            <div class="box-top"></div>
            <div class="box-bottom"></div>

        </div>
    </div>

</body>

Before rotation:

After rotation:

Posted by hellouthere on Sun, 17 Apr 2022 03:04:23 +0930

Programs Wiki