（18）HTML&&CSS笔记（2D）

最新推荐文章于 2024-07-30 11:54:26 发布

沭瑾

最新推荐文章于 2024-07-30 11:54:26 发布

阅读量119

点赞数 1

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/xiaoma_666/article/details/97428176

版权

HTML&&CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、transform（变换）

rotate 旋转
deg为旋转角度，旋转值可以是正值也可以是负值；
scale 缩放
值可以为负值；
scale（number）：一个值的时候，x与y方向同时进行缩放；
scale（number，number）：两个值的时候，单独对应的值控制对应的方向；
translate 位移
translate（number）：单独控制x轴的方向；
translate（num1，num2）：单独控制水平方向num1和垂直方向num2；
translateX（num1）：单独控制水平方向；
translateY（num1）：单独控制垂直方向；
skew() 倾斜
skew（deg）：单独控制x轴的方向；
skew（deg1，deg2）：单独控制水平方向deg1和垂直方向deg2；
skew（deg）：单独控制水平方向；
traskewnslateY（deg）：单独控制垂直方向；

<!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>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:None;
            width:500px;
            height:500px;
            border:2px solid deeppink;
            margin:50px;
        }
        ul li{
            float: left;
            width:100px;
            height:100px;
            transition-duration: 1s;
        }
        .item1{
            background-color: #0f9;
        }
        .item2{
            background-color: #f90;
        }
        .item3{
            background-color: #90f;
        }
        .item4{
            background-color: #333;
        }
        .item5{
            background-color: #99f;
        }
        .item6{
            background-color: #3f3;
        }
        .item7{
            background-color: #0f9;
        }
        .item8{
            background-color: #f90;
        }
        .item9{
            background-color: #90f;
        }
        .item10{
            background-color: #333;
        }
        .item11{
            background-color: #99f;
        }
        .item12{
            background-color: #3f3;
        }
        .item13{
            background-color: #333;
        }
        .item14{
            background-color: #99f;
        }
        .item15{
            background-color: #3f3;
        }
        .item16{
            background-color: #3f3;
        }
        ul:hover li.item1{
            transform: rotate(45deg);
        }
        ul:hover li.item2{
            transform: rotate(-45deg);
        }
        ul:hover li.item3{
            transform: scale(1.5)
        }
        ul:hover li.item4{
            transform: scale(0.5)
        }
        ul:hover li.item5{
            transform: scale(-1,-1)
        }
        ul:hover li.item6{
            transform: scale(1,0.5)
        }
        ul:hover li.item7{
            transform: translate(200px,);
        }
        ul:hover li.item8{
            transform: translate(-200px);
        }
        ul:hover li.item9{
            transform: translate(0px,200px);
        }
        ul:hover li.item10{
            transform: translate(-200px,0px);
        }
        ul:hover li.item11{
            transform: translateX(100px);
        }
        ul:hover li.item12{
            transform: translateY(100px);
        }
        ul:hover li.item13{
            transform: skew(45deg);
        }
        ul:hover li.item14{
            transform: skew(-45deg);
        }
        ul:hover li.item15{
            transform: skew(-45deg);
        }
        ul:hover li.item16{
            transform: skew(-45deg,-45deg);
        }
    </style>
</head>
<body>
    <ul>
        <li class='item1'>item1</li>
        <li class='item2'>item2</li>
        <li class='item3'>item3</li>
        <li class='item4'>item4</li>
        <li class='item5'>item5</li>
        <li class='item6'>item6</li>
        <li class='item7'>item7</li>
        <li class='item8'>item8</li>
        <li class='item9'>item9</li>
        <li class='item10'>item10</li>
        <li class='item11'>item11</li>
        <li class='item12'>item12</li>
        <li class='item13'>item13</li>
        <li class='item14'>item14</li>
        <li class='item15'>item15</li>
        <li class='item16'>item16</li>
    </ul>
</body>
</html>

在这里插入图片描述

2、transform-origin 变换的基点
默认为（center，center）
结合方位值来使用：
top，center，bottom
left，center，right
可以使用百分比和像素作为单位

综合写法：
注意：变换值先后顺序会改变样式的显示；

<!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>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:None;
            width:500px;
            height:500px;
            border:2px solid deeppink;
            margin:50px;
        }
        ul li{
            float: left;
            width:100px;
            height:100px;
            transition-duration: 1s;
        }
        .item1{
            background-color: #0f9;
        }
        .item2{
            background-color: #f90;
        }
        .item3{
            background-color: #90f;
        }
        .item4{
            background-color: #333;
        }
        ul:hover li.item1{
            transform: rotate(0deg);
            transform-origin: center center;
        }
        ul:hover li.item2{
            transform: rotate(45deg);
            transform-origin: left top;
        }
        ul:hover li.item3{
            transform: rotate(45deg);
            transform-origin: bottom  right;
        }
        ul:hover li.item4{
            transform: rotate(45deg);
            transform-origin: 50% 50%;
        }
    </style>
</head>
<body>
        <ul>
            <li class='item1'>item1</li>
            <li class='item2'>item2</li>
            <li class='item3'>item3</li>
            <li class='item4'>item4</li>
        </ul>
</body>
</html>

在这里插入图片描述