过渡
1 display:none 没有过渡效果
2 渐变 也是没有过渡效果
3 背景图片 过渡效果 完美
透明色
背景颜色透明 -
字体 不会透明
2 优化
做特效的尽可能 变换 transform来实现
3 写案例步骤
1 先分析 主要结构 大结构 htm结构
2 再写 静态 css效果
3 再去考虑 hover 过渡 动态效果
2 空间转换
位移
translateX
translateY
translateZ
默认情况下看不见元素在z轴上的变化
translate3d(x,y,z)
旋转
rotateX
rotateY
rotateZ
rotate3d(x,y,z,角度)
缩放 - 3d缩放
立体坐标系
x轴
y轴
新 z轴！！
方向 由屏幕里面指屏幕外面
其他
1 视距 perspective 看见元素 近大远小的效果
2 左手准侧
根据左手来判断物体旋转的方向 方便我们 判断代码如何执行 或者 根据效果图来反推代码
3 3d立方体
立体呈现 开启3d空间
transform-style: preserve-3d;
