当CSS开始跳舞：transform-origin，那个被忽略的舞台中心 最近啃了一块关于CSS transform-origin 的骨头，啃得我脑洞大开，感觉CSS再也不是那个只会老老实实排版布局的乖宝宝了，它简直要开始跳舞，而且跳得还挺有创意！这玩意儿，说白了就是改变元素变形的“舞台中心”，但别小看这几个像素点的改变，它能让你的动画从“四平八稳”瞬间变成“骚气十足”。 以往，我们做动画，习惯性地 focus 在 transform 上，又是 rotate 又是 scale，恨不得把元素折腾得面目全非。但就像一个舞者，再厉害的舞步，要是站错了位置，那也只能是瞎蹦跶。transform-origin 就是那个决定舞者站位的关键。 想象一下，你想要让一个正方形绕着它的左上角旋转，你可能第一反应是直接 transform: rotate(45deg)。没毛病，正方形的确转了。但是，如果你把 transform-origin 设置成 0 0（左上角），再来一次 rotate(45deg)，你会发现，嘿，这感觉完全不一样了！前者是绕着中心点转，后者是绕着左上角转，前者像是原地旋转，后者像是被钉 …
同源策略（Same-Origin Policy）在 Web 安全中的作用
同源策略：Web 安全的“守门大爷” 想象一下，你住在一个大杂院里，邻居老王每天在你家门口晃悠，一会儿说要帮你看看水管，一会儿说要帮你检查煤气，你肯定会觉得浑身不自在，甚至会怀疑他是不是要偷你家的东西。互联网世界也是一样，如果没有一个“守门大爷”来管着，那简直就是一场灾难。这个“守门大爷”，就是我们今天要聊的“同源策略”（Same-Origin Policy，简称 SOP）。 同源策略，简单来说，就是浏览器为了保护用户的安全，设置的一道防火墙。它规定：一个网页（或者说一个“源”）只能访问来自同一个源的资源。 这里的“源”可不是指水源，而是由三个要素决定的： 协议（Protocol）： 比如 HTTP 或 HTTPS。 域名（Domain）： 比如 www.example.com。 端口（Port）： 比如 80 或 443。 只有当这三个要素完全相同，才能被认为是同一个源。打个比方，如果你的房子是“HTTPS协议，www.myhouse.com地址，80端口”，那么只有协议、地址和端口都跟你家一模一样的房子，才能被认为是你的“同源”邻居，你才能放心地让他们进你家门。 为什么需要同源策略 …