CSS3 3D 特效视频教程-tutorial css-php.cn

课程介绍：

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：编程挑战

播放地址：//m.sbmmt.com/course/416.html

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

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

课件下载：//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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci CSS3 3D 特效视频教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!