HTML+CSS 3D旋转登录表单

最新推荐文章于 2024-08-29 01:44:50 发布

若冰说

最新推荐文章于 2024-08-29 01:44:50 发布

阅读量770

点赞数 16

分类专栏：若冰说CSS css 文章标签： css html 3d javascript 前端

本文链接：https://blog.csdn.net/weixin_72553980/article/details/139941885

版权

若冰说CSS 同时被 2 个专栏收录

81 篇文章 9 订阅

订阅专栏

css

81 篇文章 1 订阅

订阅专栏

效果演示

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);
    }
}