3D旋转卡片

最新推荐文章于 2023-05-12 19:07:35 发布

this_is_Azou

最新推荐文章于 2023-05-12 19:07:35 发布

阅读量618

点赞数 1

分类专栏： css 文章标签： css3 html animation

本文链接：https://blog.csdn.net/this_is_Azou/article/details/110645339

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

3D旋转卡片

添加立体感

transform

translate
- translate()：带有两个参数，分别代表：X轴和Y轴，第二个参数不写，则默认为0；
- translateX()：向X轴平移，正值向右，负值向左；
- translateY()：向Y平移，正值向下，负值向上；
- translateZ()：向Z轴平移，元素和屏幕之间的距离，越近translateZ值越大，越远，Z值越小；
- translate3d()：同时设置X,Y,Z三个方向的移动距离，三个参数必须填写；
rotate：正数表示顺时针旋转，负数表示逆时针旋转；
- rotate：旋转元素，配合属性transform-orgin：设置旋转点，默认为绕中心点旋转（center，center）；或设置像素值，0px,0px为左上角；
- rotateX()
- rotateY()
- rotateZ()
- rotate3D()：共带有4个参数，前三个是指X,Y,Z的坐标，设置了一条主轴的方向，重要的是相互之间的比值，第四个参数为度数，表明绕这个主轴旋转多少角度；
scale
- scale()：带有两个参数，第一个为X，第二个为Y
- scaleX()：改变的是元素的刻度，>1放大，<1，缩小；
- scaleY()：默认值为1；元素的宽高不变；
- scaleZ()
- scale3d()：带有3个参数，表示X,Y,Z;
- 如果连续写了两个缩放，scale（0.5,0.5）scale(3,3)则计算二者乘积，放大1.5倍；
skew
- skew：带有两个参数，两个参数同时操作；
- skewX()：倾斜该元素，元素被倾斜，但是高度不变，则Y轴被拉伸，本身尺寸不改变，变的是轴的刻度；
- skewY()：倾斜元素，宽度不变；

perspective:xxx px;

模拟人的视角，数字代表人眼与屏幕的距离；
数值越小，表示离屏幕越近，元素表现的越大，数值越大，元素表现的就越小 近大远小
添加了空间感，则看起来是在进行旋转，否则类似于伸缩；
当perspective与translateZ联合使用时，实际看到的是元素在屏幕上的投影，当屏幕位置固定时，translateZ表示元素与屏幕之间的距离，
- translateZ为正：当距离越大时，在屏幕上投影越大；
- translateZ为负：元素在屏幕后方，当距离越大，屏幕上投影越小；
该属性设置在父元素上
perspective-origin：指人眼视角的位置，默认为center，center，则看向父元素中心
也可使用像素，百分比，top bottom left right 设置视角；

在这里插入图片描述

transition

设置属性变换的过渡效果；设置变换的方式，速度，时间，类型等；

transition：后面带四个参数，分别为　property,duration,timing-function delay;例如： transition: width 1s linear 1s
transition-property：表明监控的属性，默认值为none,all为监视所有变化属性，可以单独设置，也可多个设置，多个设置时属性名之间使用逗号分隔；
transition-duration：设置过渡需要的时间，默认值为0，可设置秒数：1s等；
transition-timing-function ：设置过渡动画的类型
- linear：匀速过渡，等同于贝塞尔曲线（0.0,0.0，1.0,1.0）
- ease：平滑过渡，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)
- ease-in：由慢到快，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢，等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快到慢，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- cubic-bezier：自定义贝塞尔曲线，设置四个参数后，控制台点击图标可以进行调整；
- step-start：等同于steps(1,start)，第一个参数指定动画分几个步骤完成；
- step-end：等同于steps(1,end)，第二个参数为忽略，如果为start就忽略第一个，end忽略最后一步；
transition-delay：表明动画的延时，类似于setTimeOut；默认值为0；

animation

给元素设置动画，animation要配合@keyframes一起使用；

animation：第一个参数为@keyframes的名称，第二个参数为动画的时间，第三个参数为动画的执行动作，后面也有循环次数，方向等；从第三个参数起可以互换顺序；
animation-name:设置要添加的动画是那一组@keyframes名称；
animation-duration：设置完成动画需要的时间；
animation-timing-function：设置完成动画的运动效果；
animation-delay：设置动画的延迟时间；
animation-iteration-count：设置动画循环的时间，默认为1，只运动一次，infinite：无限循环
animation-direction：设置@keyframes中关键帧的播放顺序，默认为0%~100%；
- normal：默认值，正常方向
- reverse：1000%~0%，反向播放
- alternate：先从正向执行，后续从反向执行，进行持续的交替运动，此时设置动画循环次数必须大于2；
- alternate-reverse
animation-play-state：可以设置动画的暂停，和运动的属性，设置伪元素动画，例如在hover中添加暂停属性；默认值为running，运动；paused:暂停；

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转卡片</title>
    <link rel="stylesheet" href="day_2.css">
</head>
<body>
<div class="card">
<!--    正面卡片-->
    <div class="front">
        <p>你好</p>
    </div>
<!--    背面卡片-->
    <div class="back">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
</div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
body{
    /*弹性布局，页面元素垂直水平居中*/
    display:flex;
    justify-content: center;
    align-items: center;
    /*页面始终占浏览器总高*/
    height: 100vh;
    background-image:linear-gradient(200deg,#78f,#f78);
    /*动画看起来硬生生的，没有任何立体感，所以需要添加这个属性来增加卡片旋转的立体感，值越小，立体感越明显*/
    /*立体感：近大远小，属性的意思为设置视距*/
    perspective:500px;
}
.card{
    position: relative;
    width: 300px;
    height: 450px;
    border-radius:30px;
    cursor:pointer;
    background-color: #fff;
    box-shadow: 1px 1px 20px rgba(0,0,0,0.1);
    /*父元素加3D盒子属性*/
    transform-style:preserve-3d;
    animation:rotate_reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.card:hover{
    /*动画，名称，时长，第三个属性是贝塞尔曲线，可以自定义动画的运动轨迹，让动画的运动轨迹有很多中可能*/
    /*第四个属性是动画完成时的状态，一般动画完成后就回到了0%的状态，默认值是backwards，但是当我们设置为forwards的时候，当动画运行到100%时候就会停下来，不会再回到0%*/
    animation:rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.front,.back{
    /*弹性布局，元素垂直排列*/
    display:flex;
    flex-direction:column;
    /*垂直排列情况下，子元素水平居中*/
    align-items: center;
    justify-content:space-around;
    /*子元素是绝对定位，父元素需要相对定位*/
    position:absolute;
    top:0;
    left:0;
    /*1em:16px*/
    font-size:1.3em;
    border-radius:30px;
    background-color:#fff;
    width: 100%;
    height: 100%;
}
.back{
    /*背面卡片到后面去*/
    /*但是仅仅设置这个只是绕Y轴旋转了，因为父元素的盒子是一个2D盒子，需先变成3D盒子*/
    transform:rotateY(180deg);
}
/*定义翻转动画*/
@keyframes rotate{
    0%{
        transform:rotateY(0);
    }
    100%{
        transform:rotateY(180deg);
    }
}
@keyframes rotate_reverse{
    0%{
        transform:rotateY(180deg);
    }
    100%{
        transform:rotateY(0);
    }
}

this_is_Azou

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
3D旋转卡片

3D旋转卡片添加立体感transformtranslatetranslate()：带有两个参数，分别代表：X轴和Y轴，第二个参数不写，则默认为0；translateX()：向X轴平移，正值向右，负值向左；translateY()：向Y平移，正值向下，负值向上；translateZ()：向Z轴平移，元素和屏幕之间的距离，越近translateZ值越大，越远，Z值越小；translate3d()：同时设置X,Y,Z三个方向的移动距离，三个参数必须填写；rotate：正数表示顺时针旋
复制链接

扫一扫