神代綺凜

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

[ilidilid] 哔哩哔哩(真)镜像站

跟你们说,这个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

我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多1分钱的金额
既可免费赞赏,又可完成支付宝支付任务!
Last modification:February 24th, 2018 at 02:21 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment Cancel reply

4 comments

  1. AUK CL  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    皮~

  2. 狂放  Android 5.1(Android 5.1) / Google Chrome 63.0.3239.53(Google Chrome 63.0.3239.53)

    最骚的还是前端

  3. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.167(Google Chrome 64.0.3282.167)

    大佬可以考虑给自己的站点也做个这个玩玩2333333333333

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)