CSS3 3D 特效影片教學-css教學-PHP中文網

首頁

web前端

css教學

CSS3 3D 特效影片教學

炎欲天舞

Aug 24, 2017 am 11:27 AM

csscss3

課程介紹：

Transition

1：CSS3中transition

#2：CSS3中transition屬性

#3：CSS3中transition效果分析

4：CSS3中transition5種效果

練習題

1：建立3D場景

2：建立3D場景

3：實際建立3D場景

4：translate屬性

5：transform屬性

#練習題

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;}

function rotate() {
   var x = document.getElementById("rotatex").value;
   var y = document.getElementById("rotatey").value;
   var z = document.getElementById("rotatez").value;
    document.getElementById(&#39;cube&#39;).style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
   document.getElementById(&#39;deg-x&#39;).innerText = x;
   document.getElementById(&#39;deg-y&#39;).innerText = y;
   document.getElementById(&#39;deg-z&#39;).innerText = z;
 }

以上是CSS3 3D 特效影片教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自從我第一次介紹了CSS4面中的事情以來，就已經進行了更多的討論。我將在這裡從其他人那裡匯集我最喜歡的想法。有

三種代碼Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時，我都會將我正在查看的代碼分為三種類型，或者如果您願意的話。我認為這些類型可以應用於

https很容易！Apr 11, 2025 am 11:51 AM

我對公開哀悼HTTPS的複雜性感到內gui。過去，我從第三方供應商那裡購買了SSL證書，並且遇到了麻煩

HTML數據屬性指南Apr 11, 2025 am 11:50 AM

您想了解的有關HTML，CSS和JavaScript中數據屬性的所有信息。

了解JavaScript中的不變性Apr 11, 2025 am 11:47 AM

如果您以前從未在JavaScript中使用不變性，則可能會發現很容易將其與為新值或重新分配分配變量的混淆。

具有現代CSS功能的定製樣式表單輸入Apr 11, 2025 am 11:45 AM

如今，可以在語義上且易於訪問的同時構建自定義的複選框，無線電按鈕和切換開關。我們甚至不需要

腳註字符Apr 11, 2025 am 11:34 AM

有特殊的超級數字字符有時非常適合腳註。他們在這裡：

如何使用HTML，CSS和JavaScript創建動畫倒計時計時器Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多

See all articles

熱AI工具

熱工具

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中