js+css实现三维翻转式步骤表单输入效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现三维翻转式步骤表单输入效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
	box-sizing: border-box;
}

body {
	font-family: helvetica;
	height: 100vh;
	width: 100vw;
	background: #e90052;
	margin: 0;
	display: flex;
	transition: background 0.5s;
}

.scene {
	width: 650px;
	height: 70px;
	/*   margin: 80px; */
	perspective: 400px;
	margin: auto;
	position: relative;
	transition: opacity 0.5s;
	z-index: 2;
}

.scene.end {
	opacity: 0;
	transition-delay: 0.25s;
	transition: opacity 0.5s;
	z-index: 0;
}

.welcome {
	opacity: 0;
	width: 100%;
	position: absolute;
	height: 100%;
	display: flex;
	transition-delay: 0.25s;
	transition: opacity 0.5s;
}

.welcome .content {
	margin: auto;
	font-size: 2rem;
	color: #ffffff;
}

.welcome.show {
	opacity: 1;
}

.cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(-100px);
}

.steps {
	position: absolute;
	top: 140%;
	display: flex;
	width: 100%;
	justify-content: center;
}

.steps .dot {
	width: 15px;
	height: 15px;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 100%;
	margin: 0 10px;
	transition: 0.25s;
}

.steps .dot.done {
	background: rgba(255, 255, 255, 0.75);
}

.cube__face {
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-weight: bold;
	transition: transform 0.5s;
	opacity: 0;
	background: #ffffff;
	border-radius: 5px;
}

.cube__face--front {
	transform: rotateY(0deg) translateZ(35px);
	opacity: 1;
	box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.5);
}

.cube__face--top {
	transform: rotateX(90deg) translateZ(35px);
	opacity: 1;
}

.cube__face--top .container {
	opacity: 0;
	transition: opacity 0.5s;
}

.cube__face--bottom {
	transform: rotateX(-90deg) translateZ(35px);
}

.hidden {
	display: none;
}

input:not([type="radio"]),
select {
	display: block;
	margin: 0;
	/*     padding: 0 0 0.15em; */
	/*     padding-left: 50px; */
	width: 100%;
	border: none;
	background-color: transparent;
	color: #202020;
	text-overflow: ellipsis;
	font-weight: normal;
	font-size: 1.5rem;
	height: 100%;
	/* 	padding-right:185px; */
}

input:focus,
select:focus {
	outline: none;
}

input::placeholder {
	color: #a0a0a0;
}

.cube__face .container {
	height: 100%;
	width: 100%;
	position: relative;
	padding-right: 185px;
	padding-left: 50px;
}

div.btn.show {
	opacity: 1 !important;
}

div.btn.show span {
	display: block !important;
}

div.btn {
	position: absolute;
	right: 10px;
	top: 0;
	height: 100%;
	display: flex;
	transition: opacity 0.25s ease;
	opacity: 0;
}

div.btn span {
	color: #e90052;
	font-size: 1.25rem;
	padding: 10px 25px;
	border: 3px solid #e90052;
	border-radius: 40px;
	display: inline-block;
	margin: auto;
	cursor: pointer;
	transition: all 0.25s;
	display: none;
}

div.btn span:hover {
	color: #ffffff !important;
	background: #e90052;
}

input.label::placeholder {
	color: #202020 !important;
}

#step__1 .container,
#step__6 .container {
	display: flex;
	padding-right: 10px;
}

.radio {
	display: flex;
	align-items: center;
}

.item {
	width: 46px;
	height: 46px;
	margin: 2px;
	cursor: pointer;
	transition: transform 0.25s;
	border-radius: 4px;
}

.item:hover {
	transform: scale(1.2);
}

body.blue,
.item.blue {
	background: #04f5ff;
}

body.yellow,
.item.yellow {
	background: #ebff00;
}

body.purple,
.item.purple {
	background: #e90052;
}

body.green,
.item.green {
	background: #00ff85;
}

body.violet,
.item.violet {
	background: #38003c;
}

div.btn.blue span {
	color: #04f5ff;
	border-color: #04f5ff;
}

div.btn.blue span:hover {
	background: #04f5ff;
}

div.btn.yellow span {
	color: #ebff00;
	border-color: #ebff00;
}

div.btn.yellow span:hover {
	background: #ebff00;
}

div.btn.purple span {
	color: #e90052;
	border-color: #e90052;
}

div.btn.purple span:hover {
	background: #e90052;
}

div.btn.green span {
	color: #00ff85;
	border-color: #00ff85;
}

div.btn.green span:hover {
	background: #00ff85;
}

div.btn.violet span {
	color: #38003c;
	border-color: #38003c;
}

div.btn.violet span:hover {
	background: #38003c;
}

.right {
	display: flex;
	align-items: center;
}

.right label {
	font-size: 1.5rem;
	font-weight: normal;
}

.checkbox {
	padding: 4px;
	border: 3px solid #e90052;
	display: inline-block;
	width: 64px;
	border-radius: 40px;
	margin: auto 8px;
}

.checkbox .circle {
	height: 25px;
	width: 25px;
	border-radius: 100%;
	background: #e90052;
	display: block;
	transform: translateX(0px);
	transition: transform 0.25s ease, background 0.25s ease;
}

.checkbox.checked {
	background: #e90052;
}

.checkbox.checked .circle {
	transform: translateX(25px);
	background: white !important;
}

.checkbox.blue {
	border-color: #04f5ff;
}

.checkbox.blue .circle {
	background: #04f5ff;
}

.checkbox.checked.blue {
	background: #04f5ff;
}

.checkbox.yellow {
	border-color: #ebff00;
}

.checkbox.yellow .circle {
	background: #ebff00;
}

.checkbox.checked.yellow {
	background: #ebff00;
}

.checkbox.purple {
	border-color: #e90052;
}

.checkbox.purple .circle {
	background: #e90052;
}

.checkbox.checked.purple {
	background: #e90052;
}

.checkbox.green {
	border-color: #00ff85;
}

.checkbox.green .circle {
	background: #00ff85;
}

.checkbox.checked.green {
	background: #00ff85;
}

.checkbox.violet {
	border-color: #38003c;
}

.checkbox.violet .circle {
	background: #38003c;
}

.checkbox.checked.violet {
	background: #38003c;
}
</style>

  
</head>

<body>
  <div class="scene">
	<div class="cube">
		<nav class="steps">
			<div class="dot step_1 done"></div>
			<div class="dot step_2"></div>
			<div class="dot step_3"></div>
			<div class="dot step_4"></div>
			<div class="dot step_5"></div>
			<div class="dot step_6"></div>
		</nav>
		<div class="cube__face  cube__face--front" id="step__1">
			<div class="container">
				<input type="text" class="label" placeholder="Please pick a color" disabled>
				<div class="radio">
					<div class="item blue" data-color="blue"></div>
					<div class="item yellow" data-color="yellow"></div>
					<div class="item purple" data-color="purple"></div>
					<div class="item green" data-color="green"></div>
					<div class="item violet" data-color="violet"></div>
				</div>
				<div class="btn" style="display:none">
					<span data-step=&quo.........完整代码请登录后点击上方下载按钮下载查看