CSS33D特效视频教程

来源：懂视网责编：小采时间：2020-11-27 18:50:17

CSS33D特效视频教程

CSS33D特效视频教程:课程介绍：Transition1：CSS3中transition2：CSS3中transition属性3：CSS3中transition效果分析4：CSS3中transition5种效果练习题1：创建3D场景2：创建3D场景3：实际创建3D场景4：translate属性5：transform属性练习题1：创建3D动画效

推荐度：

点击下载本文 文档为doc格式

导读CSS33D特效视频教程:课程介绍：Transition1：CSS3中transition2：CSS3中transition属性3：CSS3中transition效果分析4：CSS3中transition5种效果练习题1：创建3D场景2：创建3D场景3：实际创建3D场景4：translate属性5：transform属性练习题1：创建3D动画效

课程介绍：

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.gxlcms.com/course/416.html

讲师特点：思路清晰；讲解形象；声音清脆；循环渐进。

难点分析：因为其中使用了很多最新属性，需要注意浏览器的兼容问题，注意多换浏览器，更改兼容性。

课件下载：http://www.gxlcms.com/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;
 }

CSS33D特效视频教程

推荐度：

点击下载本文 文档为doc格式

标签：视频特效教程

热门焦点

CSS33D特效视频教程

CSS33D特效视频教程

CSS33D特效视频教程

最新推荐

猜你喜欢

热门推荐