【标题】#博学谷IT学习技术支持#哦--------------------------------- 平面转换&渐变&空间转换基础知识总结

♥一.平面转换-缩放

♥二 渐变-渐变背景

♥三.空间转换 

一.平面转换-缩放

作用：使用scale改变元素的尺寸

语法 ： transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

   一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

 transform: scale(缩放倍数);

  scale值大于1表示放大, scale值小于1表示缩小

♥二 渐变-渐变背景

 

使用background-image属性实现渐变背景效果

l 渐变是多个颜色逐渐变化的视觉效果

l 一般用于设置盒子的背景

渐变背景：使用background-image属性实现渐变背景效果

♥三.空间转换 

作用：使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果

  空间：是从坐标轴角度定义的。 x 、y 和z 三条坐标轴构成了一个立体空间，

             z轴位置与视线方向相同。

   空间转换也叫 3D转换

   属性：transform

 

空间位移

目标：使用translate实现元素空间位移效

语法

l transform: translate3d(x, y, z);

l transform: translateX(值);

l transform: translateY(值);

l transform: translateZ(值);

l

取值（ 正负 均可）

l 像素单位数值

l 百分比

透视

目标：使用 perspective 属性实现 透视 效果

l 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

 答：近大远小、近清楚远模糊

l 思考：默认情况下，为什么无法观察到Z轴位移效果？

 答：Z轴是视线方向，移动效果应该是距离的 远或近 ， 电脑屏幕是平面，默认无法观察远近效果 透视

目标：使用 perspective 属性实现 透视 效果

l 属性 （添加给父级）

Ø perspective: 值;

Ø 取值：像素单位数值， 数值一般在 800 – 1200 。

   作用

   空间转换时，为元素添加 近大远小、近实远虚 的 视觉效果

透视

目标：使用 perspective 属性实现 透视 效果

  属性 （添加给父级）

 perspective: 值;

   透视距离也称为视距，所谓的视距就是 人的眼