老师的代码里设置了k=1的镜像对称,为什么结果显示的却是旋转了90度的效果?
老师代码:
登陆购买课程后可参与讨论,去登陆吧
同学你好,不是旋转的,虽然效果看起来差不多,是对称过去的。可以理解为我按照这个k这条线,对折下。
下图是老师画的一个图,比较简洁,同学可以参考理解:
蓝色是最开始的形状。红色是左边。黄色是k
绿色就是要对折的点,原来的位置与k做垂线,距离相等,得到的位置就是新的位置与原来对称的。
祝学习愉快~
但是按照这个理解,课程讲的y=2x的情况,又和实际效果有出入了。我按照这个方法算完预想的位置和实际效果完全不一样
同学你好,个人理解的和“慕糖”老师、讲师描述的不太一样,可以参考一下:
测试代码(建议将页面缩小至50%查看):
<!DOCTYPE html>
<
html
lang
=
"en"
>
head
meta
charset
"UTF-8"
title
>matrix3d</
style
type
"text/css"
div {
width: 1500px;
height: 250px;
background: #abcdef;
position: absolute;
left: 300px;
top: 900px;
}
div:nth-child(1)>img {
transform: matrix(0,-1,-1,0,0,0)
</
body
div
><
img
src
"images/sprite.jpg"
></
y=x 这条轴,对应的k是-1,此时得到的位移矩阵是transform: matrix(0,-1,-1,0,0,0) ,效果如下:
y=-x这条轴,对应k是1,得到的矩阵是transform: matrix(0,1,1,0,0,0),效果如下:
y=2x这条轴,对应k=-2,得到的矩阵是transform: matrix(-0.6,-0.8,-0.8,0.6,0,0),效果如下:
y=x 这条轴,对应的k是-1,这一点我一直都搞错了,y=x这种情况,我一直把k设置成1。这样算完就和实际现象对不上。
垂直向下的那条轴线定成y轴的正方向就能完全对应上了。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
登录后可查看更多问答,登录/注册
本阶段为你揭开日常所见网页的神秘面纱,炫酷的动效并不难得,带你从基础知识到静态网页布局,再到用JS实现动态网页开发,轻松迈入前端开发的大门。
16 1
65 3
26 3
18 1
188 1
购课补贴联系客服咨询优惠详情
慕课网APP您的移动学习伙伴
扫描二维码关注慕课网微信公众号
在线咨询
领取优惠
免费试听
领取大纲
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧