css实现立体倾斜三维确认框效果点击效果代码-html代码-BFW代码库

css实现立体倾斜三维确认框效果点击效果代码

代码语言：html

代码描述：css实现立体倾斜三维确认框效果点击效果代码

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

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

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

  
  
<style>
:root {
	font-size: 2rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	color: #eee;
	background-color: #111;
}

.center {
	display: grid;
	place-content: center;
	position: absolute;
	inset: 0;
}

.iso {
	--iso: scaleX(0.866025) rotateZ(30deg) skewX(150deg);

	max-width: 45ch;
	transform: var(--iso);
}

.btn {
	--size: 1em;
	--magic: 0.866025;
	--shift: translate(
		calc(-1 * var(--size)),
		calc(-1 * var(--size) * var(--magic))
	);
	position: relative;
	font: inherit;
	color: #eee;
	background-color: #222;
	border: none;
	padding: 0;

	transform: var(--shift);
	transition: transform 400ms ease;
}

.content {
	background-color: #222;
	padding: 1em;
}

:is(.side, .front) {
	position: absolute;
	transition: transform 400ms ease;
}

.front {
	inset: 0 calc(var(--size) * -2) 0 100%;
	background-color: #262626;

	transform-origin: center left;
	transform: skewY(41.25deg) scaleX(0.5);
	z-index: 1;
}

.side {
	inset: 100% 0 calc(-2 * var(--size) * var(--magic)) 0;
	background-color: #161616;

	transform-origin: top center;
	transform: skewX(49deg) scaleY(0.5);
	z-index: 1;
}

.btn:hover {
	--shift: translate(
		calc(-2 * var(--.........完整代码请登录后点击上方下载按钮下载查看