CSS3技巧：3D翻转数字效果实现详解

CSS3技巧：3D翻转数字效果实现详解

引用

CSDN

1.

https://blog.csdn.net/weixin_42703239/article/details/136759879

最近在工作中遇到了一些烦心的事情，只有在周末才能静下心来写点代码。今天要分享的是如何实现一个3D翻转数字效果。

一、结构分析

这个效果主要由两部分组成：

1. 底层的半截数字
   

2. 翻动的半截数字

每部分都是一个div。半截数字通过::before和::after伪元素来制作。数字通过伪元素的content属性来设置。

HTML结构如下：

<!-- 一个数字 -->
<section>
   <div data-before="1" data-after="2"></div>
   <div data-before="1" data-after="2"></div>
</section>
<!-- 一个数字 end -->

二、CSS制作半截数字

半截数字需要分为上半截和下半截：

1. 上半截需要设置line-height为整个section的高度。
2. 下半截则需要设置line-height为0。

&::before{
    line-height: $height;
    content: attr(data-before);
}
&::after{
    line-height: 0;
    content: attr(data-after);
}

三、翻转部分制作

翻转的部分，其实就是两个半截数字绝对定位，进行重叠。其中，数字2的上半截，还需要翻转180度，因为它要翻转下才会摆正。

&::after{
    line-height: $height;
    top:0;
    transform-origin: bottom center;
    transform: rotateX(-180deg);
}

为了保证效果，还需要设置翻转部分的3D效果。

section  div:nth-child(2){
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

四、完成SCSS代码

这里使用SCSS来组织整个CSS代码。SCSS分为5个文件：

• _public.scss：存放公用样式。
• _vars.scss：存放变量设置。

$page-width: 100vw;
$page-height: 100vh;
$width :200px;
$height: 400px;

• _mixins.scss：存放SCSS函数。

@mixin setSize($w, $h) {
    width: $w;
    height: $h;
}
@mixin flex($justify:center, $align:center){
    display: flex;
    justify-content: $justify;
    align-items: $align;
}

• _pages.scss：存放页面样式。

@charset "UTF-8";
// 页面设置
body {
  @include setSize($page-width, $page-height);
  @include flex();  // 启用flex布局，让内容居中
  background: #ddd;
}
// 每个数字
section {
  @include setSize($width, $height);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  perspective: 1000px;
  div{
    position: absolute;
    font-family: Arial;
    @include setSize($width, $height);
    // 数字的样式
    &::before,
    &::after {
        border-radius: 20px;
        display: block;
        width: $width;
        height: $height/2;
        color: #fff;
        background: linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
        font-size: $height*0.8;
        font-weight: bold;
        overflow: hidden;
        line-height: $height;
        text-align: center;
    }
    &::before{
        line-height: $height;
        content: attr(data-before);
    }
    &::after{
        line-height: 0;
        content: attr(data-after);
    }
  } 
}
// 数字翻转
section  div:nth-child(2){
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
   &::before,
   &::after{
    position: absolute;
    backface-visibility: hidden;
    transition: all 0.5s ease-in-out;
   }
   &::before{
    line-height: 0;
    top:$height/2;
    transform-origin: top center;
   }
   &::after{
    line-height: $height;
    top:0;
    transform-origin: bottom center;
    transform: rotateX(-180deg);
   }
}
// 鼠标悬停
section:hover  div:nth-child(2){
    transform: rotateX(180deg);
}

• app.scss：依次导入对应的SCSS文件。

@import "_vars.scss";
@import "_mixins.scss";
@import "_public.scss";
@import "_page.scss";

生成的CSS文件，引入HTML即可。