2019/3/12 问题小记

遇到的问题是，练习的模板需要在萤幕左方建立一个div，并以逆时针翻转90度呈现，其中的文字也是逆时针翻转90度

一开始想到用 transform: rotate(-90deg); 直接整个方格翻转-90度
但要设定将其固定在画面左方时却失败

后来选择改用将文字垂直书写的方式 再将整个方格旋转180度 终于成功了

.left-bar{    position: fixed;    left: 0;    width: 80px;    height:100%;    background-color: #fff;    transform: rotate(180deg);    writing-mode: vertical-lr;}

虽然感觉这不是最直觉的想法，但想法绕了一圈尝试后还是成功做出效果了 讚讚

希望之后还能找到更直觉的方法。

另外第一次使用了 :nth-child(n) 伪类选取器
其实很早就看到这个方法，但一直没有适当的时机使用
今天在製作 连续的icon 颜色依序渐层时 突然想到这个方法，真是意外的好用阿。

.scroll i:nth-child(1) {    color: #898989;}.scroll i:nth-child(2) {    color: #C5C6C9;}.scroll i:nth-child(3) {    color: #D9D9DB;}