（11）2020-12-15（过渡，2D转换（缩放、位移、旋转、倾斜）

2024-02-06 14:16:34

2D旋转、位移、角度、偏移

1、浏览器前缀

w3c
会员：各大互联网巨头
它设定了整个平台的规则，监督整个过程。

现在学习的是css2.1 但是到css3时，就要考虑兼容性问题。

浏览器前缀

谷歌苹果 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-

2、过渡（transition）

transition 过渡
之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。
（1） transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 （必须有）
（2）transition-duration: 过渡的时间，单位可以是s或者ms。（必须有）
（3）transition-delay:指定过渡生效的延迟时间。
（4） transition-timing-function: 指定过度的运动曲线。
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition复合写法
（过渡属性完成时间运动曲线延迟时间）
transition：all 3s linear 1s;
一般有数值/中间状态的属性才可以设置过渡，比如：width，height

例子

1，小米图标

<body>
    <!-- 窗口 -->
    <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，小米图标（伪元素写法）

<body>
    <!-- 窗口 -->
    <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转换（transform属性）

transform属性

transform 后面可以书写多个转换，但是书写顺序不同，效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转
第二种会先旋转，再位移。
所有的转换属性，只能添加给块级元素，行内元素无效。

（1）缩放（scale）

缩放：放大缩小。
格式：
transform：scale(x,y);
x:代表水平方向的缩放倍数
y：代表垂直方向的缩放倍数。
x，y是数字。比如2，代表2倍。
如果只写一个值，代表等比例缩放。
不会改变真实宽高，也不会对旁边的盒子造成影响。

（2）位移（translate）

格式：
tramsform：translate（水平位移，垂直位移）
属性值：
（1） px 正值：向右或向下。
（2）百分比是按照盒子本身的宽高。
只写一个值时，是水平位移。

（3）旋转（rotate）

格式： transform：rotate（旋转角度deg）
单位：deg

（4）变换原点（transform-origin ）

格式： transform-origin: （水平坐标垂直坐标）
属性值：
（1）px
（2）百分比：按照盒子的宽高。50%=center
（3）单词： left center等

（5）倾斜（skew）

格式：transform：skew（水平倾斜角度deg，垂直倾斜角度deg）
单位是deg，
正值顺时针，负值逆时针。
所有的转换属性，只能添加给块级元素，行内元素无效。
1、作用
改变元素在页面中的形状。
2、语法
属性：transform
函数：
1、skew(xdeg) 向横向倾斜指定度数 x取值为正，X轴不动，y轴逆时针倾斜一定角度。 x取值为负，X轴不动，y轴顺时针倾斜一定角度 skew(30deg) 2、skew(xdeg,ydeg) ydeg : 纵向倾斜度数 y取值为正，y轴不动,x轴顺时针倾斜一定角度 y取值为负，y轴不动,x轴逆时针倾斜一定角度 3、skewX(xdeg) 4、skewY(ydeg)

    <div class="box">
        <span>你好</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>

X轴倾斜45度，为正值。则图片效果是，水平方向不动，在Y轴方向上逆时针旋转45度。

（6）例子

1、扑克牌

    <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、小火箭

    <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、倾斜案例

    <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>网站首页</span></li>
        <li><span>公司简介</span></li>
        <li><span>联系方式</span></li>
        <li><span>公司地址</span></li>
    </ul>
</body>

4、过渡（位移）

    <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、过渡（旋转）

实现过程：
1、把box-top和box-bottom先定位到father左上角位置，top为0，left为0。
2、把box-top和box-bottom旋转45deg。
3、通过浏览器微调鼠标悬停后的box-top和box-bottom的top值和水平位移距离（先注释，之后在添加到hover里面，注意，旋转的角度45度同时也要写上，写在位移之前）
4、通过浏览器微调鼠标悬停前的box-top和box-bottom的top值和水平位移距离（各自添加到box-top和box-bottom中，注意，旋转的角度45度同时也要写上，写在位移之前）
5、再把3添加到鼠标悬停hover里面，设置father内容溢出隐藏
6、给需要变化块添加transition:all 时间。
7、看实现效果。

    <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: 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;
            /* 设置盒子高度变为0 */
            overflow: hidden;

            /* 中间图片块：
            设置鼠标未悬停时的样式，旋转角度为50deg，盒子高度变为0 .另外，变换过程，谁变化给谁加transition*/
            transform: rotate(50deg);
            transition: all 0.5s;
            height: 0;
        }
        .box-center-content {
            height: 120px;
            border-top: 4px solid grey;
            text-indent: 32px;
        }
        /* 中间图片块：
            设置鼠标悬停时的样式，旋转角度为0deg，盒子高度变为正常高度200px.*/
            .father:hover .box-center {
            transform: rotate(0deg);
            height: 200px;
        }


 /* 实现过程：
1、 把box-top和box-bottom先定位到father左上角位置，top为0，left为0。
2、把box-top和box-bottom旋转45deg。
3、通过浏览器微调鼠标悬停后的box-top和box-bottom的top值和水平位移距离（先注释，之后在添加到hover里面，注意，旋转的角度45度同时也要写上，写在位移之前）
4、通过浏览器微调鼠标悬停前的box-top和box-bottom的top值和水平位移距离（各自添加到box-top和box-bottom中，注意，旋转的角度45度同时也要写上，写在位移之前）
5、再把3添加到鼠标悬停hover里面 ，设置father内容溢出隐藏
6、给需要变化块添加transition:all 时间。
7、看实现效果*/

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


            /* 给box-top，和box-bottom设置显示过程 */
            transition: all 0.5s;           
        }
        /* 鼠标悬停前的位置 ，要在父框father之外，溢出不可见*/
        .box-top {
        transform:rotate(45deg) translate(-386px);
        top: -65px;
        }

        .box-bottom {  
            transform:rotate(45deg) translate(386px);     
            top: -47px;    
        }
        /* 鼠标悬停后的位置 ，在父框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>奥黛丽·赫本</h1>
                </div>
                <div class="box-center-content">
                    <p>奥黛丽·赫本（Audrey Hepburn，1929年5月4日—1993年1月20日），出生于比利时布鲁塞尔，英国女演员。</p>
                </div>
            </div>
            <div class="box-top"></div>
            <div class="box-bottom"></div>

        </div>
    </div>

</body>

旋转前：

旋转后：

码农公寓