Как наклонить картинку в HTML?

Пользователь

от alfonso.heidenreich , в категории: HTML/CSS , 3 года назад

Как наклонить картинку в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sandrine , 3 года назад

Наклонить картинку в HTML, можно так:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<head>
<style>
        .rotate {
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <img src="./image/11.jpeg" class="rotate">
</body>



Пользователь

от narciso , 2 года назад

@alfonso.heidenreich 

Существует несколько способов наклонить картинку в HTML:

  1. С помощью CSS свойства transform:
1


  1. Используя тег
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "path_to_image.jpg";
img.onload = function() {
  ctx.rotate(45 * Math.PI / 180);
  ctx.drawImage(img, 0, 0);
};


Оба способа позволяют наклонить картинку на заданный угол.