CSS3 3D 特效视频教程-css教程-PHP中文网

课程介绍：

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动画效果结构部分

jQuery和CSS3超酷3D多层图片视觉差互动特效

下载

3：JS部分

4：练习题

5：编程挑战

播放地址：http://www.php.cn/course/416.html

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

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

课件下载：http://www.php.cn/xiazai/code/2080

html



  
    
    
    
  
  
    
      
        1
        2
        3
        4
        5
        6
      
    
    
      rotate x: 0 deg
      

      rotate y: 0 deg
      

      rotate z: 0 deg

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