神代綺凛

[ilidilid] 哔哩哔哩（真）镜像站
跟你们说，这个CSS，敲好玩得（然并卵
扫描右侧二维码阅读全文
21
2018/02

[ilidilid] 哔哩哔哩（真）镜像站

  1.  Home
  2. Text  
    3. Share to：

跟你们说，这个CSS，敲好玩得（然并卵

ilidilid

http://www.ilidilid.com/

前几天这玩意在我各个Q群里轮了一遍

点开一看，确实蛮有意思的，xswl

笑的同时我也很好奇这是怎么做到的，于是耐不住寂寞F12看了一下

研究一下

一开始我以为是用js做到的，但是我看了下页面结构，整个页面就<body>里有一个反代b站的<iframe>，下面一段js脚本

然后稍微看了下js脚本，都是些无关紧要的操作

瞬间反应过来这应该是CSS，但是我确实没有印象有哪个CSS属性可以做到镜像效果的

于是看了看<head>部分的CSS，然后马上就注意到了……

哇哦！负……负1

只能说自己技艺不精了，写了一年的CSS都没能想到这种操作

也就是说，实际上这个CSS只是利用X轴缩放比例为-1，把整个<iframe>的左右给反过来了

关于transform的知识可以看
https://www.runoob.com/cssref/css3-pr-transform.html

实践一下

于是紧接着我又加了个scaleY(-1)，这回真的反了

新知识GET

版权声明：本文为原创文章，版权归 神代綺凜 所有。

本文链接：https://moe.best/gotagota/ilidilid.html

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
季付$47，CN2 GIA线路，1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买】
Last modification：February 24th, 2018 at 02:21 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

10 comments

  1. Alan-Liang  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    2333
    rdfz mirror
    几年前做的……GitHub
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @Alan-Liang 233333
      Reply
  2. 靳旭东  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
    为什么我在你博客看文章有时候点后退只会跳到文章中间部分啊
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @靳旭东 因为你本来就是文章翻到一半然后点到其他文章吧，那后退就会回到跳出之前的原位，这没什么问题呀
      Reply
      1. 靳旭东  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
        @神代綺凜 具体复现操作：https://7777777777-my.sharepoint.com/:v:/g/personal/a_bigboos_cc1/ETPzuIJOfyhHk5_eJ-7OG6sBKYt0GkgP411GLxNwx6WYZw?e=LBwZrB
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @靳旭东 确实有这个bug，跟主题作者反馈了，我临时暴力修复了下
          Reply
  3. AUK CL  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    皮~
    Reply
  4. 狂放  Android 5.1(Android 5.1) / Google Chrome 63.0.3239.53(Google Chrome 63.0.3239.53)
    最骚的还是前端
    Reply
  5. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)
    大佬可以考虑给自己的站点也做个这个玩玩2333333333333
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @Zero
      Reply