css3의 2D 변형

9937 단어
1, 2D 변형
1. 변형
    transform:translate();translateX();translateY();translate(,);
2. 전환
    transition:all 1s;
2. 구체적으로 나타난 예
1. 변위의 실례
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3 2D  title>
    <style>
    div{
        width: 100px;
        height:100px;
        background-color: skyblue;
    }
    div:active{
        /* transform: translate(100px);    :       */
        /* transform: translate(100px,200px);    ,         */
        /* transform: translateX(100px);     */
        /* transform: translateY(100px);     */
        /**/
    }
    style>
head>
<body>
    <div>div>
body>
html>

2. 확대/축소
 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3 2D  title>
    <style>
    div{
        width: 100px;
        height:100px;
        background-color: skyblue;
        /*            1       */
        transition: all 1s;
    }
    div:active{
        /*    */
        /* transform: translate(100px);    :       */
        /* transform: translate(100px,200px);    ,         */
        /* transform: translateX(100px);     */
        /* transform: translateY(100px);     */
        /**/
        /*    */
        /* transform: scale(1.2);      1.2    */
        /* transform: scaleX(1.2);        1.2  */
        /* transform: scaleY(1.2);        1.2  */
    
    }
    style>
head>
<body>
    <div>div>
body>
html>

3. 회전
/*    */
        /* transform-origin: center; */
        /*             ,          ,    */
        /* transform: rotate(-90deg);           */

4. 기울기
 /*    */
        /* transform: skew(90deg,0);     */
        /* transform: skewX(60deg);   */
        /* transform: skewY(60deg);   */

 
전재 대상:https://www.cnblogs.com/dhrwawa/p/10534722.html

좋은 웹페이지 즐겨찾기