CSS3技巧38:3D 翻转数字效果

博主其它CSS3 3D的文章:

CSS3干货4:CSS中3D运用_css 3d-CSDN博客

CSS3干货5:CSS中3D运用-2_中3d-2-CSDN博客

CSS3干货6:CSS中3D运用-3_css3d 使用-CSDN博客

=======================

最近工作上烦心的事情太多,只有周末才能让我冷静一下 coding 一会玩~

今天做一个 3D 翻转数字效果。示例图如下:

这个东西看着比较难,其实很简单。

一、结构分析

它由两部分组成:

  1. 底层的半截数字
  1. 翻动的半截数字

每部分都是一个div。半截数字由 ::before 、::after 伪标签制作。

数字由伪标签的 content 设置。

HTML 结构如下:

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。

css 复制代码
 &::before{
        line-height: $height;
        content: attr(data-before);
}
&::after{
        line-height: 0;
        content: attr(data-after);
}

三、翻转部分制作

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

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

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

css 复制代码
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 放变量设置。
css 复制代码
$page-width: 100vw;
$page-height: 100vh;

$width :200px;
$height: 400px;
  • _mixins.scss放SCSS函数。
css 复制代码
@mixin setSize($w, $h) {
    width: $w;
    height: $h;
}
@mixin flex($justify:center, $align:center){
    display: flex;
    justify-content: $justify;
    align-items: $align;
}
  • _pages.scss存放页面样式
css 复制代码
@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 文件。
css 复制代码
@import "_vars.scss";
@import "_mixins.scss";
@import "_public.scss";
@import "_page.scss";

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

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf10 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js