CSS-3d变换

3D变换

transform:
rotate: 旋转
translate:位移
scale: 缩放

3d变换属性:

rotateX: 沿着x轴旋转
rotateY:  沿着y轴旋转
rotateZ:  沿着Z轴旋转
translateX: 沿着x轴移动
translateY: 沿着y轴移动
translateZ:  沿着Z轴移动 必须配合透视使用

透视: 近大远小
perspective : 200px   设置的是用户的眼睛 和盒子的距离
添加给变换元素的父盒子

透视只是一种视觉上的呈现 ,并不是正确的3d效果

关于3d旋转方向的问题:

对着正方向去看:都是顺时针旋转的;

背面隐藏:
backface-visibility:hidden;

让子盒子保持真正的3d效果,需要给父盒子设置属性;
   <code>transform-style:preserve-3d;</code>

css3动画:

//jq  animate({},200,function(){})

css3中的动画: animation
使用方法和 js中 函数比较类似
1
2
3
4
5
6
//先定义
function say(){
alert('abc');
}
在调用
say();

动画的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@keyframes 动画名称 {
f
orm{
起始状态
}
to{
结束状态
}
}
@keyframes 动画名称 {
0%{
code
}
15%{
code
}
50%{
code
}
100%{
code
}
}

调用的时候:
animation: 动画名称 持续时间;

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 3D变换
    1. 1.1. 3d变换属性:
    2. 1.2. 关于3d旋转方向的问题:
    3. 1.3. css3动画:
      1. 1.3.1. 动画的定义