ログイン パネルをクリックすると 360 度回転し、実際に CSS3 を使用してログイン パネルを 3D 回転させる方法を参照してください。
この記事では、CSS3 の使用方法を共有します。ログイン パネルの 3D 回転を実現するための具体的なコードは、次のとおりです。具体的な内容は次のとおりです
レンダリング:
ログイン パネルをクリックします。 360度回転して情報を表示します。
ローテーション終了:
サンプルコード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆面板旋转</title>
<style>
body {
font-family: "Microsoft YaHei", "微软雅黑";
}
.container {
/*创建3D场景*/
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: -webkit-preserve-3d; /*告诉浏览器以下transform操作是在3D场景下进行的*/
}
#login-panel {
/*-webkit-transform: rotateX(45deg);*/
}
.login {
width: 500px;
height: 400px;
margin: 100px auto;
text-align: center;
border: 1px solid #ABCDEF;
border-radius: 10px;
box-shadow: 0 0 3px 3px #ABCDEF;
}
.login h1 {
margin: 50px 0;
}
.login-row span {
font-size: 18px;
}
.login-row input {
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 10px 0;
}
.btn {
outline: none;
background-color: aliceblue;
cursor: pointer;
width: 90px;
height: 40px;
border: 1px solid #DDD;
border-radius: 5px;
margin: 30px 20px;
font-size: 16px;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}
.btn:hover {
background-color: antiquewhite;
}
.login-success {
font-size: 20px;
padding: 50px;
}
</style>
<script>
var loginBtn, regiBtn;
window.onload = function() {
loginBtn = document.getElementById("login");
loginBtn.onclick = rotate;
regiBtn = document.getElementById("regi");
regiBtn.onclick = rotate;
};
function rotate() {
var x = 0;
var panel = document.getElementById("login-panel");
panel.style.transform = "rotateX(0deg)";
panel.style.webkitTransform = "rotateX(0deg)";
var flag = true;
var timer = setInterval(function() {
if(Math.round(x) >= 90 && flag) {
panel.innerHTML = "<p class='login-success'>登陆成功</p>";
flag = false;
}
if(Math.round(x) >= 358) {
panel.style.transform = "rotateX(360deg)";
panel.style.webkitTransform = "rotateX(360deg)";
clearInterval(timer);
return false;
} else {
x += 2 + (360 - x) / 60;
panel.style.transform = "rotateX(" + x + "deg)";
panel.style.webkitTransform = "rotateX(" + x + "deg)";
}
}, 25);
}
</script>
</head>
<body>
<p class="container">
<p class="login" id="login-panel">
<h1 id="登陆">登陆</h1>
<p class="login-row">
<label for="username"><span>账号：</span></label>
<input type="text" id="username" name="username">
</p>
<p class="login-row">
<label for="password"><span>密码：</span></label>
<input type="password" id="password" name="password">
</p>
<p class="login-row">
<button id="login" class="btn" type="button">登陆</button>
<button id="regi" class="btn" type="button">注册</button>
</p>
</p>
</p>
</body>
</html>
以上がこの記事の全内容です、皆様の学習に少しでもお役に立てれば幸いです。
以上がCSS3 を使用すると、ログイン パネルを 3D で回転できます。 コード例。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
マルチサムスライダー：一般的なケースApr 12, 2025 am 10:52 AMこの2部構成のシリーズの最初の部分では、2つの親指スライダーを取得する方法を詳しく説明しました。今、私たちは＆＃039; llが一般的なマルチサンプスのケースを見ていますが、別のものと
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 中国語版
中国語版、とても使いやすい
