2d css设计

<style>

        .first {

            width: 200px;

            height: 100px;

            background-color: red;

        }

        .first:hover {

            /* transform: translate(100px,50px); */

            transform: translatey(-10px);

            -webkit-transform: translatey(-10px);

            -moz-transform: translateY(-10px);

            box-shadow: 2px 3px 5px #999;

        }

        .second {

            width: 100px;

            height: 200px;

            background-color: pink;

            margin-left: 300px;

            margin-top: 60px;

            border-top-left-radius: 30px;

        }

        .second:hover {

            transform: rotate(50deg);

            transform-origin: left top;

            /* transform: rotate(-50deg); */

        }

        .third {

            width: 120px;

            height: 80px;

            background-color: aqua;

            margin: 50px auto;

        }

        .third:hover {

            transform: scale(50%);

        }

        .four {

            width: 200px;

            height: 100px;

            background-color: blueviolet;

            margin: 100px;

           

        }

        .four>div:hover {

            transform: skew(0deg,0deg);

        }

        .four>div {

            width: 200px;

            height: 100px;

            background-color: pink;

            border-bottom: 10px solid red;

        }

    <!-- transform：变形

         属性值：

            translate:平移，简写  

               只写一个值代表水平方向，垂直为0

            包含：translateY/translateX

              水平：正值向右，负值向左

              垂直：正值向下，负值向上

            rotate:设置旋转 单位deg

               正值顺时针，负值逆时针

            scale:设置缩小放大，数值，代表当前元素的宽高的倍数，

                 只写一值:代表宽高的缩放倍数相同

                 二个值：第一个代表宽，第二个代表高

                注意：缩小是[0,1）

                     放大 >1

            skew:设置倾斜，单位deg

              包含：skewX/skewY

               只写一个值：水平方向

        transform-origin:设置旋转的定点

     -->

     <!-- 设置鼠标悬停向右平移100px -->

    <div class="first"></div>

    <!-- 设置鼠标悬停进行旋转 -->

    <div class="second"></div>

    <!-- 设置鼠标悬停进行放大 -->

    <div class="third"></div>

    <!-- 设置鼠标悬停倾斜 -->