31 3D日历组件 - 技术栈

效果演示

实现了一个3D文字旋转的效果，当鼠标悬停在容器上时，最后一个文字会旋转630度，而其他文字会逐渐旋转到水平面上方。

Code

html 复制代码

<div class="container">
        <div class="text" style="--j:0;">
            <span style="--i:0">2</span>
            <span style="--i:1">3</span>
            <span style="--i:2">4</span>
            <span style="--i:3">5</span>
        </div>
        <div class="text" style="--j:1;">
            <span style="--i:0">0</span>
            <span style="--i:1">1</span>
            <span style="--i:2">2</span>
            <span style="--i:3">3</span>
        </div>
        <div class="text" style="--j:2;">
            <span style="--i:0">2</span>
            <span style="--i:1">3</span>
            <span style="--i:2">4</span>
            <span style="--i:3">5</span>
        </div>
        <div class="text" style="--j:3;">
            <span style="--i:0">3</span>
            <span style="--i:1">4</span>
            <span style="--i:2">5</span>
            <span style="--i:3">6</span>
        </div>
    </div>

css 复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.container {
    display: flex;
    transform-style: preserve-3d;
    gap: 10px;
    transform: rotateY(30deg) rotateX(10deg);
}

.container .text {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 2.5s ease-in-out;
    transition-delay: calc(0.25s*var(--j));
}

.container .text span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#434343, #535353);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4em;
    font-weight: 700;
    font-family: 黑体;
    color: #fff;
    transform-style: preserve-3d;
    transform: rotateX(calc(90deg*var(--i))) translateZ(50px);
}

.container .text::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #373737;
    transform-origin: left;
    transform: rotateY(90deg) translateX(-50px);
}

.container .text:last-child span {
    background: linear-gradient(#29c040, #32ed4e);
    color: #333;
}

.container .text:last-child:before {
    background: #29ab3c;
}

.container:hover .text {
    transform: rotateX(-360deg);
}

.container:hover .text:last-child {
    transform: rotateX(630deg);
}

实现思路拆分

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这段代码是设置全局样式，将所有元素的外边距、内边距和盒模型设置为0，以便更好地控制元素的大小和位置。

css 复制代码

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8e8e8;
}

这段代码是设置页面的基本样式，将页面的高度设置为100vh，以便页面填充整个屏幕。使用flex布局将页面内容居中显示，并将背景颜色设置为#e8e8e8。

css 复制代码

.container {
  display: flex;
  transform-style: preserve-3d;
  gap: 10px;
  transform: rotateY(30deg) rotateX(10deg);
}

这段代码是设置容器的基本样式，使用flex布局将容器内容垂直排列，并使用preserve-3d属性保留3D效果。使用gap属性设置容器中元素之间的间距为10px。使用transform属性设置容器的旋转角度为30度，x轴旋转角度为10度。

css 复制代码

.container.text {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: 2.5s ease-in-out;
  transition-delay: calc(0.25s*var(--j));
}

这段代码是设置文字的基本样式，将文字的位置设置为相对定位，宽度和高度都设置为100px。使用transform-style属性保留3D效果。使用transition属性设置文字的过渡效果，过渡时间为2.5秒，缓动函数为ease-in-out。使用transition-delay属性设置文字的过渡延迟时间，延迟时间为0.25秒的乘积。

css 复制代码

.container.text span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#434343, #535353);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  font-weight: 700;
  font-family: 黑体;
  color: #fff;
  transform-style: preserve-3d;
  transform: rotateX(calc(90deg*var(--i))) translateZ(50px);
}

这段代码是设置文字的样式，将文字的位置设置为绝对定位，宽度和高度都设置为100%。使用background属性设置文字的背景颜色为渐变色。使用display属性将文字内容居中显示。使用justify-content和align-items属性将文字内容水平和垂直居中显示。使用font-size、font-weight和font-family属性设置文字的字体大小、字重和字体类型。使用color属性设置文字的颜色。使用transform-style属性保留3D效果。使用transform属性设置文字的旋转角度为90度的乘积，并将文字向内缩放50px。

css 复制代码

.container.text::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #373737;
  transform-origin: left;
  transform: rotateY(90deg) translateX(-50px);
}

这段代码是设置文字的侧边空白填充的样式，将文字的侧边空白填充的位置设置为绝对定位，宽度和高度都设置为100%。使用background属性设置文字的侧边空白填充的背景颜色为#373737。使用transform-origin属性设置文字的侧边空白填充的旋转中心为左上角。使用transform属性设置文字的侧边空白填充的旋转角度为90度，并将文字向左移动50px。

css 复制代码

.container.text:last-child span {
  background: linear-gradient(#29c040, #32ed4e);
  color: #333;
}

这段代码是设置最后一个文字的样式，将文字的背景颜色设置为渐变色，颜色为#333。

css 复制代码

.container.text:last-child:before {
  background: #29ab3c;
}

这段代码是设置最后一个文字的侧边空白填充的样式，将文字的侧边空白填充的背景颜色设置为#29ab3c。

css 复制代码

/* 4.hover效果 */
.container:hover.text {
  transform: rotateX(-360deg);
}

.container:hover.text:last-child {
  transform: rotateX(630deg);
}

这段代码是设置鼠标悬停在容器上时文字的旋转效果，将第一个文字的旋转角度设置为-360度，将最后一个文字的旋转角度设置为630度。当鼠标悬停在容器上时，文字会逐渐旋转到水平面上方。