Поворот и масштабирование сценария

Question

У меня простая анимация, написанная на JavaScript с использованием библиотеки p5.js. Я обычно размещаю сценарии, подобные этим в Интернете, с помощью <script></script> и размещаю свой холст в обратном порядке с помощью правил CSS vertical-align: top; z-index: -1 холст моих анимаций обычно масштабируется динамически, поэтому нет необходимости в сложном CSS.

Если у вас есть холст с фиксированной шириной и высотой (например, 600 x 400), можно ли применять 2D-преобразования CSS, например transform: translate(50px, 100px); transform: rotate(50px, 100px);, ко всему холсту? И в качестве последующего вопроса, как бы я указал свой CSS на скрипт? Могу ли я дать скрипту собственный класс? Или мне нужно разместить скрипт внутри?

Спасибо!

Answer 1

Да, вы можете применять преобразования CSS и 2d для элемента холста фиксированного размера.

canvas { 
 
    width: 600px; 
 
    height: 400px; 
 
    background: black; 
 
    transform: translate(50px, 100px); transform: rotate(45deg); 
 
}

<canvas></canvas>

Re: укладка сценария - не стиль самого script элемента, как никогда не отображается в браузере. Что бы вы сделали, так это стиль любых элементов, создаваемых script. Так скажите script создает <div class="createdByJS">hello world</div> на странице, вы бы затем стиль его через .createdByJs { color: red; }.