做案例思路
案例；缩放，阴影，平移
- 看清除案例静态结构 然后书写标签
- 样式来实现案例的功能
思路
- 真实的开发情况（我们最开始分析的思路 不一定全对 会出现反复了解案例和修改代码的情况 正确 不可避免）
- 鼠标移入后展示它的效果
- 图片放大；div从下往上移动；里面的图片scale缩放
- 盒子的颜色变深，不精确的描述，需要多花上面的需求多时间和经历去研究需求
- 除了文字之外，其他都变深了
- 深下 到 上的渐变
- 分拆 如何实现；用什么代码来实现！
背景透明色拓展
- 当一个盒子没有设置背景颜色，他的背景色就等于父元素的背景颜色
- background-color:transparent;默认的代码，transparent设置div的背景颜色等于父元素的背景颜色
transparent
总结
分析
- 看完早上的第一节课，华为案例之后，你昨天晚上靠你的能力写到11点也没有写出来-- 你认为你的问题没学好
- 本身案例 知识点 也不少
- 但是案例自己摸索写到11点，他不是浪费你的时间，是很有意义的！ 鼓励!
- 你已经在学 自学上面了
思路
- 写综合案例的时候：
- 要求我们很清除知道每一个需求
- 需要简单的看一眼就懂
- 麻烦 自己思考 请求技术经理 产品经理+ui设计师 沟通来确定需求和请求帮助！！
- 要求我们很清除知道每一个技术点
注意
- 请求别人的帮助的时候 别人会给点一些解决方案
- 有些方案是我们已经掌握的 思想
- 有些方案是我们没有学过 就需要去学习
最后
完成一个项目能使得你
- 沟通能力得到加强
- 项目开发的流程得到加强
- 技术能力得到加强
- 业务-需求能力得到加强
优化
1
- 特性 建议优先使用 平面变换
疑问1
- 那老师你既然能用bottom实现这个效果，为啥还要用translate来写呢，这不是多了一行代码了嘛
- translate相比较于bottom 带来的性能优化高的多的多
- 因为translate css3提出的新技术 浏览器看到translate特效的时候，浏览器内部 专门开启一个做特效的任务-工作流程做优化
- 所以不在乎多一行
- 而且浏览器是一个大佬，1s中执行10万行代码，所以不在乎多那么1行十行的
工作问题
- 做产品 给客户去用
- 客户只关心产品好不好用 会去关心 你这个小产品 开发了多少实际
- 开发者来说会有这么一个问题
做事态度
- 写代码的时候会考虑，开发的爽不爽（看问题的角度）
- 功能是不是更加的优秀（心态问题）
补充知识；渐变-过度
演示结论：
- 渐变是没有过度效果的！！！
- 背景图片渐变效果还不是很完善！！！工作中要慎用（浏览器的支持还不够好）
另外补充
过度属性添加的时候要注意，添加的要求是：需要展示效果的标签，才添加过渡效果，并不是所谓的父元素，区分开来，要注意！！！
不管，就像实现 鼠标移入 图标片换的渐变过程
- 只能换另外的思路来实现这个功能！！
- div里面包装两个图片标签
- 先让一个图片隐藏，一个图片显示
- div hover 再让另外一个图片隐藏 另外一个图片显示
- 定位加透明度来实现 透明度有过度
- display:none 没有过度；
- none black 过度不了
谷歌调试微调技巧
图片解析
空间转换
也有三种状态
- 使用transform属性实现元素在空间内的位移，旋转，缩放等效果
空间
- 是从坐标轴角度定义的，x,y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。，空间转换页交3D转换。
- 默认情况下，看不到元素在Z轴上的变化
透视
目标
- 使用perspective属性实现透视效果
- 思考，生活中，同一个物体，观察距离不同，视觉上有什么区别？
- 答：近大远小，近清除，远模糊
- 思考，默认情况下，为什么无法观察到z轴位移效果？
- 答：z轴是视线的方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
属性（添加给父级）视距
- perspective:值
- 透视距离也被称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 当我们想要看见元素，在z轴上的变化的时候，需要给被观察的物体添加 视距，一般是1000px
空间旋转：
目标
语法：transform:rotateZ(值)，使用rotate实现元素空间旋转效果。
左手法则：
判断旋转方向，左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
立体呈现：
目标
使用transform-style:preserve-3d呈现立体图
- 可以设置一个标签 是普通的平面，图形，还是立体空间的容器transform-style
- preserve-3d///flat 默认真
- 当我们需要做一个立体图形的时候，需要给容器，设置一个开启立体空间的属性。
小总结
- 空间中的物体，旋转的时候，不一定只限制于x,y,z轴做旋转，任意的方向旋转。
- 沿着任意的方向做方向
- transform:rotate3d(x,y,z，角度)
- 矢量 两个点，可以确定方向还要长度！
做了解
做立方体思路
- 静态结构
- 定一个父盒子 box 包装这六个小 平面（立方体有六个面）
- 写6个面
- 先使用定位，来重叠在一起，（方便后面一个一个的调整他们的位置 构造立方体）
2：
-
使用空间变换来实现 立方体
-
在父元素添加transform:rotated3d（0，0，0，角度（数值一定要带单位deg））
3：
- 提前检查一下，看效果
