1. Toy模板网首页
  2. > Toy博客

31 3D日历组件

9月前 作者：若冰说 分类：Toy博客 阅读(34) 违法举报

这篇具有很好参考价值的文章主要介绍了31 3D日历组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果演示

31 3D日历组件,若冰说CSS,css,css,前端,若冰说CSS

实现了一个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度。当鼠标悬停在容器上时，文字会逐渐旋转到水平面上方。文章来源地址https://www.toymoban.com/news/detail-801311.html

到了这里，关于31 3D日历组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包