效果演示
实现了一个具有3D旋转效果的登录框，背景为太空图片，登录框位于太空中心，可以通过输入用户名和密码进行登录。登录框使用了CSS3的3D变换和动画效果，使其具有立体感和动态效果。同时，登录框的样式也经过精心设计，使用了半透明的背景、模糊效果、阴影等元素，使其看起来更加美观和现代化。
Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>3D旋转登录表单</title>
<link rel="stylesheet" href="./24-3D旋转登录表单.css">
</head>
<body>
<div class="container">
<div class="wrap">
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-left"></div>
<div class="wall wall-right"></div>
<div class="wall wall-back"></div>
</div>
<div class="form-box">
<div class="tit">login</div>
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
<button>登录</button>
<span>没有账号？<a href="#">去注册</a></span>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
overflow: hidden;
}
.container {
perspective: 5px;
perspective-origin: 50% 50%;
}
.wrap {
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 20s linear infinite;
}
.wall {
position: absolute;
width: 100%;
height: 100%;
background: url("./images/space1.jpg") no-repeat;
background-size: cover;
}
.wall-top {
transform: rotateX(90deg) translateZ(500px);
}
.wall-bottom {
transform: rotateX(-90deg) translateZ(500px);
}
.wall-left {
transform: rotateY(-90deg) translateZ(500px);
}
.wall-right {
transform: rotateY(90deg) translateZ(500px);
}
.wall-back {
transform: rotateX(180deg) translateZ(500px);
}
.form-box {
position: relative;
background-color: rgba(255, 255, 255, 0.1);
width: 400px;
height: 550px;
border-radius: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
flex-direction: column;
backdrop-filter: blur(20px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.form-box .tit {
color: #fff;
font-size: 40px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 10px;
text-indent: 10px;
margin: 95px auto 50px auto;
}
.form-box input {
width: 300px;
height: 30px;
background: transparent;
text-indent: 8px;
border: none;
outline: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
color: #fff;
margin: 15px auto;
}
.form-box input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.form-box button {
width: 300px;
height: 40px;
margin: 35px auto 40px auto;
border: none;
background: #00addd;
color: #fff;
border-radius: 8px;
letter-spacing: 20px;
text-indent: 20px;
font-weight: bold;
cursor: pointer;
}
.form-box button:hover {
background: #0098d4;
}
.form-box span {
font-size: 14px;
color: #fff;
}
.form-box a {
color: #00addd;
text-decoration: none;
}
@keyframes move {
0% {
transform: rotate(0deg) translateZ(-500px);
}
100% {
transform: rotate(90deg) translateZ(500px);
}
}
实现思路拆分
* {
margin: 0;
padding: 0;
}
这段代码是将所有元素的外边距和内边距都设置为0，以便更好地控制页面布局。
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
overflow: hidden;
}
这段代码设置了body元素的样式，将其高度设置为100vh，即占据整个视口的高度。使用flex布局，将其子元素水平和垂直居中。设置背景颜色为黑色，同时隐藏溢出部分。
.container {
perspective: 5px;
perspective-origin: 50% 50%;
}
这段代码设置了一个容器元素，使用perspective属性设置了透视距离为5px，使得其子元素具有3D效果。perspective-origin属性设置了透视点的位置，这里设置为容器中心。
.wrap {
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 20s linear infinite;
}
这段代码设置了一个包裹元素，使用绝对定位，将其左上角定位到容器中心。设置了宽度和高度为1000px，使其能够完全覆盖整个容器。使用transform-style属性设置了子元素的变换方式为保留3D效果。使用animation属性设置了动画效果，调用了名为move的动画，持续时间为20秒，线性运动，无限循环。
.wall {
position: absolute;
width: 100%;
height: 100%;
background: url("../images/space1.jpg") no-repeat;
background-size: cover;
}
这段代码设置了一个墙体元素，使用绝对定位，宽度和高度都为100%，使其完全覆盖包裹元素。使用background属性设置了背景图片为space1.jpg，使用no-repeat属性使其不重复，使用background-size属性设置了背景图片的大小为cover，使其完全覆盖墙体元素。
.wall-top {
transform: rotateX(90deg) translateZ(500px);
}
.wall-bottom {
transform: rotateX(-90deg) translateZ(500px);
}
.wall-left {
transform: rotateY(-90deg) translateZ(500px);
}
.wall-right {
transform: rotateY(90deg) translateZ(500px);
}
.wall-back {
transform: rotateX(180deg) translateZ(500px);
}
这段代码设置了墙体元素的不同面，使用transform属性设置了旋转和平移变换，使其具有3D效果。其中，rotateX表示绕X轴旋转，rotateY表示绕Y轴旋转，translateZ表示沿Z轴平移。这些变换的参数可以根据需要进行调整，以达到最佳效果。
.form-box {
position: relative;
background-color: rgba(255, 255, 255, 0.1);
width: 400px;
height: 550px;
border-radius: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
flex-direction: column;
backdrop-filter: blur(20px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
这段代码设置了一个登录框元素，使用相对定位，使其相对于包裹元素进行定位。设置了背景颜色为半透明白色，宽度和高度分别为400px和550px，设置了圆角边框和边框阴影。使用flex布局，将其子元素垂直居中，并设置了主轴方向为垂直方向。使用backdrop-filter属性设置了模糊效果，使其看起来更加美观。
.form-box .tit {
color: #fff;
font-size: 40px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 10px;
text-indent: 10px;
margin: 95px auto 50px auto;
}
这段代码设置了登录框中的标题元素，使用了选择器来选择.form-box元素下的.tit元素。设置了字体颜色为白色，字体大小为40px，字体加粗，文本转换为大写，字母间距为10px，首行缩进为10px，上下左右的外边距分别为95px、auto、50px、auto，使其居中并与其他元素有一定的间距。
.form-box input {
width: 300px;
height: 30px;
background: transparent;
text-indent: 8px;
border: none;
outline: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
color: #fff;
margin: 15px auto;
}
这段代码设置了登录框中的输入框元素，设置了宽度和高度分别为300px和30px，背景为透明，文本缩进为8px，去掉了边框和外边距，设置了底部边框为白色半透明，字体颜色为白色，上下外边距为15px，左右外边距为auto，使其居中并与其他元素有一定的间距。
.form-box input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
这段代码设置了输入框的占位符文本的样式，设置了字体颜色为白色半透明，使其与输入框的背景颜色相似。
.form-box button {
width: 300px;
height: 40px;
margin: 35px auto 40px auto;
border: none;
background: #00addd;
color: #fff;
border-radius: 8px;
letter-spacing: 20px;
text-indent: 20px;
font-weight: bold;
cursor: pointer;
}
这段代码设置了登录框中的提交按钮元素，设置了宽度和高度分别为300px和40px，上下外边距为35px和40px，左右外边距为auto，使其居中并与其他元素有一定的间距。去掉了边框，设置了背景颜色为蓝色，字体颜色为白色，设置了圆角边框和字母间距，使其看起来更加美观。设置了鼠标指针为手型，表示该元素可以被点击。
.form-box button:hover {
background: #0098d4;
}
这段代码设置了按钮元素在鼠标悬停时的样式，将背景颜色改为深蓝色，使其看起来更加醒目。
.form-box span {
font-size: 14px;
color: #fff;
}
这段代码设置了登录框中的提示文本元素的样式，设置了字体大小为14px，字体颜色为白色。
.form-box a {
color: #00addd;
text-decoration: none;
}
这段代码设置了登录框中的链接元素的样式，设置了字体颜色为蓝色，去掉了下划线。
@keyframes move {
0% {
transform: rotate(0deg) translateZ(-500px);
}
100% {
transform: rotate(90deg) translateZ(500px);
}
}
这段代码定义了一个名为move的动画，使用了@keyframes规则。在0%时刻，设置了旋转角度为0度，沿Z轴平移-500px，使其位于包裹元素的后面。在100%时刻，设置了旋转角度为90度，沿Z轴平移500px，使其位于包裹元素的前面。这样就实现了一个不断旋转的3D效果。
