ホームページ > 記事 > ウェブフロントエンド > CSS3 3D 特殊効果のビデオチュートリアル

CSS3 3D 特殊効果のビデオチュートリアル

炎欲天舞オリジナル: 2017-08-24 11:27:391828ブラウズ

コースの紹介:

トランジション

1: CSS3のトランジション

2: CSS3のトランジション属性

3: CSS3のトランジション効果の分析

4: CSS3のトランジションの5つの効果

演習問題

1: 3D シーンの作成

2: 3D シーンを作成する

3: 実際に 3D シーンを作成する

4: 属性を変換する

5: 属性を変換する

演習問題

1: 3D アニメーション効果を作成する

2: 作成する3Dアニメーションエフェクト構造パーツ

3: JSパーツ

4: 練習問題

5: プログラミングチャレンジ

プレイアドレス: http://www.php.cn/course/416.html

講師の特徴 : 明快な思考と進歩的な音声。

難易度分析: 最新の属性を多く使用するため、ブラウザーの互換性の問題に注意を払い、ブラウザーを頻繁に変更し、互換性を変更する必要があります。

コースウェアのダウンロード: http://www.php.cn/xiazai/code/2080

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="js.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="cube">
        <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
      </div>
    </div>
    <div id="op">
      <p>rotate x: <span id="deg-x">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate y: <span id="deg-y">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate z: <span id="deg-z">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
      oninput="rotate()"/><br/>
    </div>
  </body>
</html>

css

#wrapper {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 50%;
}
#cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  -webkit-transform-style: preserve-3d;
}
.face {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.5);
  font-size: 200px;
  text-align: center;
  line-height: 200px;
  font-weight: 900;
  color: #fff;
}
#face1 {
}
#face2 {
  -webkit-transform-origin: right;
  -webkit-transform: rotateY(-90deg);
}
#face3 {
  -webkit-transform-origin: left;
  -webkit-transform: rotateY(90deg);
}
#face4 {
  -webkit-transform: translateZ(-200px);
}
#face5 {
  -webkit-transform-origin: top;
  -webkit-transform: rotateX(-90deg);
}
#face6 {
  -webkit-transform-origin: bottom;
  -webkit-transform: rotateX(90deg);
}
#op{
  margin:0 auto;
  font-size:16px;
  font-weight:bold;
  width:800px;
}
#op .range-control{width:721px;}

rreee

以上がCSS3 3D 特殊効果のビデオチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：円形の形状を実装し、HTML5 キャンバスにパーセンテージを表示する進行状況バーの詳細な例次の記事：円形の形状を実装し、HTML5 キャンバスにパーセンテージを表示する進行状況バーの詳細な例

続きを見る

CSS3 3D 特殊効果のビデオ チュートリアル

関連記事

CSS3 3D 特殊効果のビデオチュートリアル