效果演示
实现了一个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。文章来源:https://www.toymoban.com/news/detail-801311.html
/* 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模板网!