CSS3 3D 特效視頻教程

最後更新：2017-08-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

課程介紹：

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('cube').style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";   document.getElementById('deg-x').innerText = x;   document.getElementById('deg-y').innerText = y;   document.getElementById('deg-z').innerText = z; }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More