济南网站建设模板,dw个人网页制作素材,深圳建设网官方网站,android网站开发效果演示 实现了一个3D文字旋转的效果#xff0c;当鼠标悬停在容器上时#xff0c;最后一个文字会旋转630度#xff0c;而其他文字会逐渐旋转到水平面上方。 Code
div classcontainerdiv classtext style--j:0;sp…
效果演示 实现了一个3D文字旋转的效果当鼠标悬停在容器上时最后一个文字会旋转630度而其他文字会逐渐旋转到水平面上方。 Code
div classcontainerdiv classtext style--j:0;span style--i:02/spanspan style--i:13/spanspan style--i:24/spanspan style--i:35/span/divdiv classtext style--j:1;span style--i:00/spanspan style--i:11/spanspan style--i:22/spanspan style--i:33/span/divdiv classtext style--j:2;span style--i:02/spanspan style--i:13/spanspan style--i:24/spanspan style--i:35/span/divdiv classtext style--j:3;span style--i:03/spanspan style--i:14/spanspan style--i:25/spanspan style--i:36/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度。当鼠标悬停在容器上时文字会逐渐旋转到水平面上方。
