20210524-马瑞

日志

一、知识总结

1、 transform属性值

translate(x,y) 定义 2D 转换、移动

translate3d(x,y,z) 定义 3D 转换，父元素 transform-style: preserve-3d;

translateX(x) 定义转换 X 轴的值。

translateY(y) 定义转换 Y 轴的值。

translateZ(z) 定义转换 Z 轴的值。

scale(x[,y]?) 描定义述 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

2、动画

定义：

@keyframes animationName{
from {}
to {}
}

使用：animation: name duration...;

3、浮动

（1）将图片右浮动30像素：

img {

float: left;

margin-right: 30px;

}

（2）清除浮动clear

属性值left ：停止任何活动的左浮动
属性值right ：停止任何活动的右浮动
属性值both ：停止任何活动的左右浮动

4、定位

（1）静态定位static

（2）相对定位relative

（3）绝对定位absolute相对static以外的第一个父元素定位

（4）固定定位fixed 相对于浏览器本身的绝对定位

二、心得体会

​ 通过今天的学习了解到了许多网络上的元素是如何定位的如何去实现动态效果和鼠标触动效果，也理解了3d动态视图的翻转思路，掌握了绝对定位与相对定位的区别。

三、提出问题

1、margin与position的定位有什么不同？