HTML+CSS 3D旋转登录表单

效果演示

24-3D旋转登录表单.png

实现了一个具有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效果。