HTML 代码
<div class="min-h-screen bg-gradient-to-br from-stone-200 via-stone-100 to-stone-200 dark:from-stone-900 dark:via-stone-950 dark:to-stone-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center font-sans">
<div class="max-w-md w-full relative group perspective-1000">
<!-- Front of the 3D card -->
<div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-y-180 backface-hidden rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-br from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
<div class="text-center">
<h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
Join Our Social Network
</h2>
<p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
Create your profile and connect with friends!
</p>
</div>
<form class="mt-8 space-y-6" action="#" method="POST">
<input type="hidden" name="remember" value="true">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="username" class="sr-only">Username</label>
<input id="username" name="username" type="text" autocomplete="username" required
class="appearance-none rounded-t-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
placeholder="Username">
</div>
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="appearance-none rounded-none relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="new-password" required
class="appearance-none rounded-b-md relative block w-full px-3 py-3 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-400 text-stone-900 dark:text-stone-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 text-sm bg-stone-100 dark:bg-stone-700 transition duration-200 ease-in-out transform translate-z-10 focus:translate-z-20"
placeholder="Password">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded bg-stone-200 dark:bg-stone-800 transform translate-z-10">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transform translate-z-10">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-amber-600 to-amber-700 hover:from-amber-700 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-amber-500/30 dark:shadow-amber-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
<!-- Heroicon name: solid/lock-closed -->
<svg class="h-5 w-5 text-amber-300 group-hover:text-amber-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</span>
Sign Up
</button>
</div>
</form>
</div>
<!-- Back of the 3D card -->
<div class="transform-style-preserve-3d transition-transform duration-700 ease-in-out rotate-y-180 backface-hidden absolute inset-0 rounded-2xl shadow-xl border border-stone-300 dark:border-stone-700 p-8 space-y-8 bg-gradient-to-bl from-stone-50 via-stone-100 to-stone-50 dark:from-stone-800 dark:via-stone-900 dark:to-stone-800">
<div class="text-center">
<h2 class="mt-6 text-3xl font-extrabold text-stone-800 dark:text-stone-100 drop-shadow-sm">
Welcome Back!
</h2>
<p class="mt-2 text-sm text-stone-600 dark:text-stone-400">
Already have an account? Sign in here.
</p>
</div>
<div class="flex flex-col items-center justify-center space-y-4">
<img class="h-24 w-24 rounded-full border-4 border-amber-500 shadow-md" src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar">
<p class="text-lg font-semibold text-stone-800 dark:text-stone-100">John Doe</p>
<button type="button"
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-br from-lime-600 to-lime-700 hover:from-lime-700 hover:to-lime-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-stone-900 shadow-lg shadow-lime-500/30 dark:shadow-lime-700/30 transition duration-300 ease-in-out transform translate-z-10 hover:translate-z-20 hover:scale-105 active:scale-95 active:translate-z-5">
Go to Profile
</button>
<p class="text-sm text-stone-600 dark:text-stone-400 mt-4">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Or log in with another account</a>
</p>
</div>
</div>
</div>
</div>
<style>
/* This is necessary for the 3D effect */
.perspective-1000 {
perspective: 1000px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.translate-z-10 {
transform: translateZ(10px);
}
.translate-z-20 {
transform: translateZ(20px);
}
.translate-z-5 {
transform: translateZ(5px);
}
/* Custom styles for the 3D rotation */
@media (hover: hover) {
.group:hover .transform-style-preserve-3d:first-child {
transform: rotateY(180deg);
}
.group:hover .transform-style-preserve-3d:last-child {
transform: rotateY(360deg);
}
}
/* Fallback for touch devices or if hover is not available */
/* You might replace `group:hover` with a JavaScript-triggered class toggle in a real app */
.group-hover\:rotate-y-180 {
transform: rotateY(180deg);
}
.group-hover\:rotate-y-360 {
transform: rotateY(360deg);
}
</style>