Я видел несколько отличных скриншотов, на которых люди настраивают редактор Atom и добавляют 3D-эффекты, поэтому я тоже захотел его!
после некоторых исследований я обнаружил, что атом использует электрон и хром в качестве своего браузера, поэтому мы можем сделать его 3D
также у него есть хорошая анимация при наведении
В разделе «Правка» > «Таблица стилей» … добавьте приведенный ниже код и наслаждайтесь
# атом-перспектива () {
@viewing-расстояние: 12 дюймов;
@rotation: 20 градусов;
@viewing-расстояние-выкл.: 0 дюймов;
@rotation-выкл.: 0 градусов;
.tree-view {
transform: translateY(-18vh)spective(@viewing-distance) rotateY(@rotation);
padding-top: 12vh;
padding -bottom: 12vh;
transform-origin: слева;
ширина: 120%;
высота: 120%;
переход: 1 с;
&:hover {< br /> transform: translateY(-15vh) перспектива(@viewing-distance-off) rotateY(@rotation-off);
}
}
.tree-view- scroller {
transform: translateY(-10vh) перспектива(@viewing-distance) rotateY(@rotation);
padding-top: 12vh;
padding-bottom: 12vh;
transform-origin: left;
width: 120%;
height: 120%;
}
body /deep/ atom-text-editor-minimap {< br /> преобразование: перспектива (@viewing-расстояние) rotateY(-@rotation);
преобразование-происхождение: вправо;
переход: 1 с;
&:hover {< br /> преобразование: перспектива (@view ing-distance-off) rotateY(-@rotation-off);
}
}
}
#атомная перспектива;
это улучшенная версия https://medium.com/hacking-atom/some-subtle-3d-effects-for-atom-d7a624a74fdd
