Изменяется размер изображения при rotate

@Wolver · Регистрация: 26.04.2015

Author24 — интернет-сервис помощи студентам

Собственно есть блок размерами 204х204 px. При повороте на 12 градусов размер почему-то изменяется...
Вопрос: как заставить блок сохранять свой размер при повороте?

HTML5

<div class="col-12 d-flex flex-row flex-wrap justify-content-center">
    <div class="d-flex packaging-options-category">
        <div class="d-flex mx-auto my-auto poc-outer-block">
            <div class="d-flex mx-auto my-auto poc-inner-block">
                <div class="d-flex poc-img" id="poc-img1"></div>
            </div>
        </div>
    </div>
</div>

CSS

.packaging-options-category {
    width: 243px;
    height: 308px;
    border: 1px solid red;
}
.poc-outer-block {
    height: 221px;
    width: 221px;
    background-color: rgba(255, 185, 1, 0.2);
    border-radius: 60px;
}
.poc-inner-block {
    height: 183px;
    width: 183px;
    background: linear-gradient(180deg, #FFB901 37.86%, #F78500 100%);
    border-radius: 50px;
}
 
.poc-img {
    position: relative;
    top: -50px;
    height: 204px;
    width: 204px;
    max-height: 204px;
    max-width: 204px;
    filter: drop-shadow(0px 60px 51px rgba(0, 0, 0, 0.14)) drop-shadow(0px 29px 25px rgba(0, 0, 0, 0.0912224)) drop-shadow(0px 19px 15px rgba(0, 0, 0, 0.07)) drop-shadow(0px 11px 8px rgba(0, 0, 0, 0.0487776));
    transform: rotate(12.26deg);
}
#poc-img1 {
    background: url("../img/1.png") center center no-repeat;
    background-size: cover;
}

@mr_dramm · 04.09.2021, 13:02

без знаний геометрии и javascript не обойтись

Добавлено через 3 часа 59 минут
Если не нужно чтобы квадрат вписывался во внешние размеры можно так

PHP/HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html, body{
            height: 100%;
        }
        body{
            display: grid;
            place-items: center;
        }
        .c, .r{
            height: 50vh;
            width: 50vh;
        }
        .c{
            position: relative;
            background: red;
        }
        .r{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            animation: rotate 2s linear infinite;
        }
    @keyframes rotate {
        from {
            transform: rotate(360deg);
        }
    }
    </style>
</head>
<body>
<div class="c">
    <div class="r"></div>
</div>
</body>
</html>

Блоги программистов
Подброка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .	С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()
Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом задержки). Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .	Руководство по созданию бота для Телеграм на Python IT_Exp 04.01.2025 Боты для Телеграм представляют собой автоматизированные программы, которые выполняют различные задачи, взаимодействуя с пользователями через интерфейс мессенджера. В данной статье мы рассмотрим,. . .	Применение компонентов PrimeVue в Vue.js 3 на TypeScript BasicMan 04.01.2025 Введение в PrimeVue и настройка окружения PrimeVue представляет собой мощную библиотеку компонентов пользовательского интерфейса для Vue. js 3, которая предоставляет разработчикам богатый набор. . .	Как стать Senior developer cpp_developer 04.01.2025 В современной индустрии разработки программного обеспечения позиция Senior Developer представляет собой не просто следующую ступень карьерной лестницы, а качественно новый уровень профессионального. . .	Что известно о дате выхода Windows 12 и чего от нее ждать IT_Exp 04.01.2025 В мире технологий постоянно происходят изменения, и операционные системы не являются исключением. Windows 11, выпущенная в октябре 2021 года, принесла множество инноваций и улучшений, но. . .	Что новенького в .NET Core 9 Programming 04.01.2025 Обзор ключевых изменений в . NET Core 9 Платформа . NET Core продолжает активно развиваться, и версия 9 представляет собой значительный шаг вперед в эволюции этой технологии. Новый релиз. . .

	04.09.2021, 13:02