Вращение CSS ведет себя иначе, чем PHP

Question

Я пытаюсь исправить поворот изображения при предварительном просмотре с помощью API FileReader.

Это код на стороне клиента

reader.addEventListener("load", function() { 
var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result)); 
$('.preview-images').append(generatePlaceholder(this.result, this.index)); 

switch(exif.Orientation){ 
    case 8: 
     $('.placeholder img').css('transform','rotate(90deg)'); 
     break; 
    case 3: 
     $('.placeholder img').css('transform','rotate(180deg)'); 
     break; 
    case 6: 
     $('.placeholder img').css('transform','rotate(-90deg)'); 
     break; 
} 
startUpload(this.index); 
}, false); 

Это PHP-код, который фиксирует хорошо вращение.

$exif = exif_read_data($filename); 
if (!empty($exif['Orientation'])) { 
$image = imagecreatefromjpeg($filename); 
switch ($exif['Orientation']) { 
    case 3: 
     $image = imagerotate($image, 180, 0); 
     break; 

    case 6: 
     $image = imagerotate($image, -90, 0); 
     break; 

    case 8: 
     $image = imagerotate($image, 90, 0); 
     break; 
} 

imagejpeg($image, $filename, 90); 
} 

Моя проблема в том, что вращение CSS делает противоположное PHP, хотя степени одинаковы. Когда случай равен 6, код PHP вращает его слева направо на 90 градусов, но CSS поворачивает его налево на 90 градусов. Поэтому, чтобы получить такое же поведение, мне нужно изменить поворот CSS на 90 вместо -90. Почему они ведут себя по-разному, когда используют одни и те же степени?

Answer 1

В поворот изображения вращается против часовой стрелки PHP (или против часовой стрелки)

угол поворота в градусах. Угол поворота интерпретируется как число градусов для поворота изображения против часовой стрелки

В CSS он поворачивается по часовой стрелке. Следовательно, разница