发表于： 2019-10-15 23:12:31
1 939
今日完成：
任务九需要页面翻转效果
CSS3 转换
CSS3 2D 转换
2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
声明的盒子，宽高，背景色及重复不同内核下代码
目标代码： transform:rotate(30deg);中文含义：变换:旋转(30度)
根据显示效果，为对角线交点为圆心，顺时针旋转30度
ps：需要注意，左边和上面有部分被视口覆盖，在自己做时，需要考虑层级关系，覆盖问题，还有高度改变，
引起整体布局的改变的问题
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
translate() 方法
ranslate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
/*translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。*/
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
遇到问题：div#div2是什么？
答：div#div2是指id为div2的div标签，也就是指这个
<div id="div2">
</div>
这是一个 DIV 元素。
其实由于ID具有唯一性，因此可以简化为
#div2
也就是id为div2的标签
扩展：为什么不直接#div2
一方面便于阅读，了解id为div2的元素的隶属关系，其次也是为了避免冲突！
在定义指定id元素样式时不是很明显，但是在定义指定class元素的样式的时候就显得比较重要。
例如简单的列表，主体左侧和右侧都有，为了避免样式重叠，就需要在选择器名称前加上上级（树）的前置限定。
class或id名称之间需要加空格 html标签后缀class或id名的时候是不需要加的，表示同级的归属关系！
例如#mainbody p.intro，表示id为mainbody下class名为intro的p元素
总结：
1.根据元素当前位置进行移动，类似绝对定位，
2.ransform:translate(Apx,Bpx);
A是相对于当前位置水平向右，B是垂直向下
并且，A或者B可以设置为0，但不能不设置，单独存在的A或B无效
3.可以设定负值，效果类似外边距
transform:translate(-20px,-10px);
显示如下：
rotate() 方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
... ...
div#div2
{
transform:rotate(30deg);
/*rotate值（30deg）元素顺时针旋转30度。*/
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
... ...
<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>
... ...
总结： transform:rotate(#deg);
#给定一个值，正值顺时针，负值逆时针，
自己做时，需要注意，元素重叠的影响
scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
div{
... ...
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
... ...
}
p{
... ...
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
... ...
}
<p>scale() 方法用于增加或缩小元素的大小。</p>
<div>
div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。
</div>
ps:因为例子是直接在div上添属性，且没有对比，
因为 div class=“”权重低于例子div｛｝
所以，把不设置ms-transform: scale(2,3);的属性设置在p标签上
取消外边距
在原来的基础上进行修改
transform: scale(2,3); /* 标准语法 */
更改
1. transform: scale(1,3);
2. transform: scale(1.5,0.5);
3. transform: scale(1.5,0)
4.transform: scale(-1,3);
5. transform: scale(-1,-3)
总结;transform: scale(A,B); /* 标准语法 */
1.A代表x轴（水平）扩大倍数，B代表y轴（垂直）扩大倍数
2.当A或者B为0，就不会显示
3.A/B取值可以为0.A/B,就为原来的宽/长的0.A/0.B倍（缩小）
4.A/B取值可以为负，效果为
-A效果为在原来的A倍基础上，内容水平反转180度
-B效果为在原来的B倍基础上，内容垂直反转180度
5.它是浏览器直接放大，f12识别还是原始大小
6.扩展方向是相对于自己原始位置，向四周扩展，所以还是要注意文本覆盖问题
skew() 方法
语法
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
... ...
div#div2
{
transform:skew(30deg,30deg);
}
... ...
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
... ...
有点看不懂，所以解构下
transform:skew(30deg);
显示：
总结：水平方向向左，倾斜30度
ps：也就是垂直边，逆时针转30度
transform:skew(-30deg);
显示：
总结：水平向右倾斜30度
垂直边顺时针转30度
transform:skew(0,30deg);
显示：
总结：垂直方向向下倾斜30度
ps：就是水平边顺时针旋转30度
transform:skew(0,-30deg);
显示：
总结：垂直方向向上向上倾斜30度
水平边逆时针转30度
总结：
1.
transform:skew(30deg,30deg);
就相当于，矩形垂直边逆时针转30度，水平边在顺时针转30度
2.transform:skew(Adeg,Bdeg)
A代表水平方向倾斜（x轴），正值向左，负值向右
B代表垂直方向倾斜（y轴），正值向下，负值向上
当不设B时，默认B为0
3.
水平方向倾斜，是垂直边转动，
垂直方向倾斜，是水平边转动
ps：
水平方向倾斜，正值，向左，垂直边转动是逆时针
垂直方向倾斜，正值，向下，水平边转动是顺时针
思考：关于transform属性的整体总结;
transform赋予元素属性（放大，缩小，偏移，旋转，）
它们都围绕一个不动的点在转换，这个点就是元素所在容器盒子的对角线交点
如果，元素添加了 transform:translate（X轴，Y轴移动），
这个交点，就变为移动后素所在容器盒子的对角线交点
并且，这个移动也可以看作是，现在的交点，相对于原来交点的移动
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
平移
在CSS3中
矩阵的原始值：transforms:matrix(1,0,0,1,0,0);
写成我们数学里矩阵的形式是这样的
为了便于描述分辨哪个数字对应的是matrix值里的哪一个，
就把它们写成：transforms:matrix(a,b,c,d,e,f);
那么写成数学矩阵式就是这样的：
根据上面说的用矩阵与向量的乘法来施加运动，就可以来看一下它到底是怎么运动起来的
具体解释：
3*3矩阵每一行的第1个值与后面1*3的第1个值相乘，第2个值与第2个相乘，第3个与第3个，然后相加，如下图：
可以得到一个式子：
x'=ax+cy+e
y'=bx+dy+f
x'和y'就是变换后的水平位置坐标和垂直位置坐标，
元素往x轴的正方形平移10，在y轴方向上不动，反映到方程式里：
x'=ax+cy+e ---（x'=ax+cy+e+10)
y'=bx+dy+f （不变）
元素往y轴的正方向平移10，在x轴方向上不动，反映到方程式里：
x'=ax+cy+e （不变）
y'=bx+dy+f ---（y'=bx+dy+f+10）
元素同时往x轴正向和y轴正向移动10个单位 ：
用css矩阵来写：transform： matrix（1,0,0,1,10,10）--其他数值都不动，e和f分别加10
实际上transform: matrix(1, 0, 0, 1, 10, 10);就等同于transform: translate(10px, 10px)
结论：平移只有跟e和f有关系，跟其他a,b,c,d没有关系，它们该怎么样还是怎么样，e对应x轴的平移，f对应y轴的平移，往正方向平移多少单位就加上多少单位，反之则减去多少个单位。
ps：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。
缩放
在理解了偏移只关心最后两个参数后，看默认值
transform: matrix(1, 0, 0, 1, x轴偏移,y轴偏移)后两个可以不用去管
剩下的四个参数中有两个1，对照属性，原始大小1的作用，得出1就是关于缩放的参数
其中，第一个缩放x轴，第二个缩放y轴。
平移就是x或者y加减一个常数来得到的，反映到式子上就是系数的变化，同理，
假设比例是s，则有matrix(s, 0, 0, s, 0, 0);，于是，套用公式，就有：x' = ax+cy+e = s*x+0*y+0 = s*x;y' = bx+dy+f = 0*x+s*y+0 = s*y;
也就是matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);
到这里：transform: matrix(x轴缩放倍数, 0, 0, y轴缩放倍数, x轴偏移,y轴偏移)
结论：缩放只有跟a和b有关系，跟其他数值都无关，a对应x轴缩放，b对应y轴缩放，缩放多少倍就乘以多少
收获如上：参考网站
http://blog.sina.com.cn/s/blog_1514d462a0102woqw.html
https://blog.csdn.net/weixin_42103959/article/details/81044389
https://blog.csdn.net/yannizhang/article/details/82426483
综合看这3个网站，添加自己的理解与总结，暂时理解了这么多
遇到问题：
1.拉伸，旋转，还有些搞不清
2.根据任务八九，呈现效果，应该是用到绝对定位，透明度，悬浮隐藏和2d，3d的镜像效果，还是什么，
我现在，能做到反转，或者旋转，但是只是这些之后的静态效果，
至于怎么出现动态的效果没理解清除，感觉有点无从下手
明日计划：理解2d3d转换，收尾任务九
返回列表
评论