31 3D日历组件-编程知识

效果演示

31-3D日历组件.gif

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

Code

<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>

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

实现思路拆分

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

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

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

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

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

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

.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秒的乘积。

.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。

.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。

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

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

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

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

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

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