过渡旋转

最新推荐文章于 2024-05-21 23:08:57 发布

炒鸡厉害

最新推荐文章于 2024-05-21 23:08:57 发布

阅读量264

点赞数

本文链接：https://blog.csdn.net/f1515891198/article/details/109749503

版权

过渡
transition：可以实现元素不同状态之间的平滑过渡；
功能实现：过渡之前的元素→hover状态，从开始到结束使中间过程可以查看。
格式：
transition：（过渡属性完成时间（s）运动曲线延迟时间）
过渡属性
transition-property：数值型的属性才可以设置过渡，发生变化时想要有过渡效果的属性。all是全属性。
完成时间
transition-duration：单位s/ms
运动曲线
transition-timing-function：liner 匀速; ease 减速； ease-in 加速； ease-in-out 先加速再减速。
延迟时间
transition-delay：单位：s；从结束状态返回开始状态时也生效。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: all 01s ease-in-out 0.01s;
            background-image: linear-gradient(to left red purple);
            margin: 0 auto;
            margin-top: 00px;
        }
        
        div:hover {
            transform: translateY(-100px);
            width: 1000px;
            height: 1000px;
            border-radius: 50%;
        }
    </style>
</head>

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

</html>

转换缩放
格式：transform：scale（x，y）x：水平方向上缩放倍数；y：垂直方向上缩放倍数。
大于1放大，小于1缩小。
位移
格式：transform：translate（x，y）
x：水平偏移量；y：垂直偏移量。
正值是水平向右和向下；负值水平向左和向上。
百分比：盒子本身的宽高与父盒子的百分比。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 500px;
            margin: 800px auto;
            position: relative;
        }
        
        div img {
            position: absolute;
            transform-origin: center bottom;
            transition: all 1s;
        }
        
        div:hover img:nth-child(1) {
            transform: rotate(-60deg) scale(2);
        }
        
        div:hover img:nth-child(13) {
            transform: rotate(60deg) scale(2);
        }
        
        div:hover img:nth-child(2) {
            transform: rotate(-50deg) scale(2);
        }
        
        div:hover img:nth-child(12) {
            transform: rotate(50deg) scale(2);
        }
        
        div:hover img:nth-child(3) {
            transform: rotate(-40deg) scale(2);
        }
        
        div:hover img:nth-child(11) {
            transform: rotate(40deg) scale(2);
        }
        
        div:hover img:nth-child(4) {
            transform: rotate(-30deg) scale(2);
        }
        
        div:hover img:nth-child(10) {
            transform: rotate(30deg) scale(2);
        }
        
        div:hover img:nth-child(5) {
            transform: rotate(-20deg) scale(2);
        }
        
        div:hover img:nth-child(9) {
            transform: rotate(20deg) scale(2);
        }
        
        div:hover img:nth-child(6) {
            transform: rotate(-10deg) scale(2);
        }
        
        div:hover img:nth-child(8) {
            transform: rotate(10deg) scale(2);
        }
        
        div:hover img:nth-child(7) {
            transform: rotate(0deg) scale(2);
        }
    </style>
</head>

<body>

    <div>
        <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>

</html>

倾斜
transform：skew（水平倾斜角度垂直倾斜角度）
单位：deg

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 500px auto;
            background-color: rebeccapurple;
        }
        
        div:hover {
            transform: skew(0, 120deg);
        }
    </style>
</head>

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

</html>

旋转
transform：rotate（角度）
正值顺时针旋转，负值逆时针旋转。
rotate与translate在一起时，要注意书写顺序，
rotate在前，先旋转自身再按旋转的角度进行旋转。
translate在前时，先位移在旋转自身。
设置旋转中心点：
transform-origin：可以写（属性值 px （left center right top bottom）百分比）
只写一个值，第二个值默认center。

## 3D旋转
transform：rotate（角度）
perspective：透视：加给变换盒子的父盒子。
设置的是用户的眼睛与平面的距离，只是视觉上的而不是真正的3D。

backface-visibility：hidden；旋转过平面是隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 旋转</title>
    <style>
        body {
            background-color: royalblue;
        }
        
        .box {
            width: 300px;
            height: 303px;
            margin: 200px auto;
            position: relative;
            top: 0;
            left: 0;
        }
        
        .x1 {
            width: 300px;
            height: 303px;
            position: absolute;
            left: 0;
            background: url(./img/bdqb.png) left 0 no-repeat;
            transform: rotateY(0deg);
            transition: all 2s;
            backface-visibility: hidden;
        }
        
        .x2 {
            width: 300px;
            height: 303px;
            position: absolute;
            right: 0;
            background: url(./img/bdqb.png) right 0 no-repeat;
            transform: rotateY(-180deg);
            transition: all 2s;
            backface-visibility: hidden;
        }
        
        .box:hover .x1 {
            transform: rotateY(-180deg);
        }
        
        .box:hover .x2 {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="x1"></div>
        <div class="x2"></div>
    </div>
</body>

</html>