Course Description:
Transition
1:CSS3 in transition
Transition property in 2:CSS3
Analysis of transition effect in 3:CSS3
Effect of TRANSITION5 in 4:CSS3
Exercises
1: Create a 3D scene
2: Create a 3D scene
3: Actually creating a 3D scene
4:translate Property
5:transform Property
Exercises
1: Create 3D animation effects
2: Create 3D animation effect Structure section
3:js part
4: Exercises
5: Programming Challenges
Play Address: http://www.php.cn/course/416.html
Instructor Characteristics: Clear thinking, explain the image, sound crisp, circular progressive.
Difficulty Analysis: Because it uses a lot of the latest properties, you need to pay attention to browser compatibility issues, pay attention to multi-browser, change the compatibility.
Courseware Download: http://www.php.cn/xiazai/code/2080
Html
<!doctype 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;}
Js
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; }