15天前端学习-第九天（个人记录）

简易3D效果

perspective-origin:3D的景深基点位置(看物体的角度),搭配transform的scaleZ()厚度,能让物体延伸。
transform:scale3d(宽x,高y,厚度z);
transform:rotate3d(1x,1y,1z,角度); 前三个值(只能写1,0)表示轴是否要旋转,第四个值表示旋转的角度。
backface-visibility:hidden;给3D的物体设置透明度时,添加该属性能遮住物体背景;

3D旋转图片的要点,使用定位(absolute)将图片叠加,然后通过旋转(rotateY)加位移(translateZ)使图片散开,
关键的是使用3D属性perspective和transform-style:preservr-3D;让整体变得立体3D

perspective的值改变,会造成不同的效果

图片翻转效果:需要使用backface-visibility:hidden;隐藏旋转图片的背面,
且旋转时两张图片的旋转角度需要改变。

JS debug sources
页面右侧的功能:
Watch可以显示表达式的值,点击加号使用。
Call Stack显示嵌套调用链
Scope显示当前的变量 Local显示当前函数中的变量 Global显示全局变量