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 设置视角；

swift 旋转卡片_默认值

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);
    }
}