CSS3 3D special effects video tutorial-CSS Tutorial-php.cn

Course introduction:

Transition

1: Transition in CSS3

2: Transition attribute in CSS3

3: Analysis of transition effect in CSS3

4: Five effects of transition in CSS3

Exercise questions

1: Create a 3D scene

2: Create a 3D scene

3: Actual creation of 3D scene

4: translate attribute

5: transform attribute

Exercise questions

1: Create 3D animation effect

2: Create 3D animation effect structure part

3: JS part

4: Practice questions

5: Programming challenge

Playback address://m.sbmmt.com/course/416.html

Lecturer characteristics: clear thinking; image of explanation ; The sound is crisp and clear; the cycle is gradual.

Difficulty analysis: Because it uses many of the latest attributes, you need to pay attention to browser compatibility issues, be careful to change browsers frequently, and change compatibility.

Courseware download://m.sbmmt.com/xiazai/code/2080

html

      
    1
 2
 3
 4
 5
 6
 
 
  rotate x: 0 deg
 
 rotate y: 0 deg
 
 rotate z: 0 deg

Copy after login

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

Copy after login

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

Copy after login

The above is the detailed content of CSS3 3D special effects video tutorial. For more information, please follow other related articles on the PHP Chinese website!