发表于： 2019-10-17 23:36:31
1 1106
今日完成：
旋转
语法：
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);
举例：
要让这个元素往顺时针方向旋转45°（sin45°=0.707，cos45°=0.707），
给元素添加：transform: matrix(0.707,0.707,-0.707,0.707,0,0);
假设角度为θ
把这个旋转放到矩阵的形式：
根据矩阵的计算公式，可以得到公式：
x'=xcosθ-ysinθ;
y'=xsinθ+ycosθ
现在我们先把公式放在这里，我们来看一下下图的这个正方形，从图中我们可以知道a,b,c,d的坐标分别为：
A(0,1) B(1,1) C(1,0) D(0,0)
当我们让它旋转90°之后，那此时的cos45°就是0 sin45°都为1，分别把A,B,C,D里的x,y代入上面的公式之后我们可以得到：
总结：
旋转 是要单独声明:transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);
角度只用到前四个，后面两个0，同之前学到的，是x轴y轴的移动
拉伸(skew)
拉伸也用到了三角函数，是tanθ，与b, c两个参数相关
matrix(1,tan(θy),tan(θx),1,0,0)
套用矩阵公式计算结果为：
x' = x+y*tan(θx)+0 = x+y*tan(θx)
y' = x*tan(θy)+y+0 = x*tan(θy)+y
其中，θx表示x轴倾斜的角度，θy表示y轴，两者并无关联。
关于旋转matrix具体值可以参考
总结归纳：
translate(移动，双值，正值右下，负值左上)
rotate (旋转，单值，正顺负逆)
scale (扩缩，双值，负值，-x内容水平翻转180度，-y内容垂直翻转180度（镜像）
取值乘以原本长度，>1放大，<1缩小， )
skew (倾斜，双值，x轴，正左倾负右倾，y轴，正下倾负上倾 )
matrix (x轴缩放倍数,tan(θy),tan(θx),y轴缩放倍数, x轴偏移,y轴偏移)
旋转另设transform：matrix（cosθ，-sinθ,sinθ,cosθ,x轴偏移,y轴偏移)
开始，做悬浮模块
思路；
1.父元素设置relations，捕捉绝对定位
2.在父元素中设一个子元素盒子，绝对定位，使其脱离于原本的父元素内容之上
3.在这个子元素上设置长宽，都是100%，充满整个父元素，设置背景增加透明度，还有内容
.main-box-222{
position: absolute;
width: 100%;
height: 100%;
color:white;
font-size: 1.2rem;
border-radius: 0.5rem;
background-color: rgba(11, 5, 46, 0.2);
}
.main-box-222-h{
text-align: center;
}
。。。 。。。
<div class="main-box">
<div class="main-box-222 p-4">
<h4 class="main-box-222-h">IOS工程师</h4>
<p>iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OSX操作系统一样，也是以Darwin为基础的，
因此同样属于类Unix的商业操作系统。国内iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。
有限的iOS开发人才成了国内企业必争的资源。国内iOS开发起步相对较晚，
人才培养机制更是远远跟不上市场发展速度。有限的iOS开发人才成了国内企业必争的资源。</p>
</div>
在此效果上动态旋转:
需要用到
动态效果
transition
transition 属性设置元素当过渡效果，四个简写属性为：
transition-property（指定CSS属性的name，transition效果）
transition-duration（transition效果需要指定多少秒或毫秒才能完成）
transition-timing-function（指定transition效果的转速曲线）
transition-delay（定义transition效果开始的时候）
注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。
语法
transition: property duration timing-function delay;
事例略
根据例子做出动态效果
遇到问题：
只有浮动效果，没有过渡效果
原因：
transition-property不识别
transition-property:transform-rotate;
transition:transform: rotate(90deg) 5s;
正确：transition:transform
但是有些编译器如vscode不识别transition:transform，显示为白色
但是浏览器识别，不要形成惯性思维
遇到问题;
transform: scale(1,-1);
scale属性，只能在x轴或z轴上选转180度
且只有在设置为负的时候
解决：
用rotate 3D旋转属性
rotate3d函数使用3D引擎对元素进行旋转。ratate3d函数具有4个参数，均不许省略。
rotate3d(x,y,z,angle)为标准语法，其中（x,y,z）为坐标，angle旋转角度。
整个函数含义是：
以坐标原点（根据transform-origin设定，默认为（0，0，0））为起始点，以（x,y,z）为终点的向量为轴，根据左手定则，选择angle角度。
如图所示：
变换的元素看做一个正方体，标注X、Y、Z轴以及方向：
屏幕上的视角：以笔记本开合90度为准，整个坐标系原点在左上角，垂直屏幕向外为Z轴，沿屏幕向右方向为X轴，沿屏幕方向向下为Y轴。
1、rotateX(angle)
定义沿着X轴的3D旋转
如上图，第一张为俯视图，第二张是3D视图。
沿X轴顺时针旋转30度，它俯视图的宽度应该为（width*cos(pi/6)）。
2、rotateY(angle)
定义沿着y轴的3D旋转
如上图，第一张为俯视图，第二张是3D视图。
沿X轴顺时针旋转30度，它俯视图的长度度应该为（height*cos(pi/6)）。
3、 rotateZ(angle)
定义沿着z轴的3D旋转
沿着z轴顺时针旋转30度，它的长度和宽度是不变的，就相当于你转动了一个方形的转盘，它的方向沿着顺时针方向转30度。
4、rotate(angle)
定义2D旋转，正值顺时针，负值逆时针，使元素旋转，但是不变形
俯视图和3D视图相同，它是2D旋转，即在平面旋转，效果和rotateZ(angle)相似。
5、rotate3d(x,y,z,angle)
定义3D旋转。
x表示x方向的矢量；
y表示y方向的矢量；
z表示z方向的矢量；
angle表示旋转角度。
查看资料：有的显示x、y、z的值取0~1之间，但是经过测试，0表示不旋转，1表示旋转；
rotateX(angle)相当于rotate3d(1,0,0,angle)；
rotateY(angle)相当于rotate3d(0,1,0,angle)；
rotateZ(angle)相当于rotate3d(0,0,1,angle)。
理解示例如下：
第一张为俯视图，第二张是3D视图。
rotate3d是沿着x、y、z方向各旋转30度。
6、rotate3d(1,1,0,angle)
我们最后再看一个只在X和Y轴方向旋转的例子，如下图：
第一张为俯视图，第二张是3D视图。
开始做x轴，和y轴的旋转
遇到问题：
transform: rotate(1,0,0,angle);
和
transform: rotateX(angle);
无效
但是，
transform: rotateX(360deg);
有效
原因;可能环境不一样
之后就没什么难点了，调整3个页面的链接
提交任务8，9
遇到问题:
在于任务无关的模块浪费太多时间
收获:同上
明日计划:任务10
返回列表
评论