Convert EXIF orientation to CSS transform rules.

Usage no npm install needed!

<script type="module">
  import exif2css from 'https://cdn.skypack.dev/exif2css';



npm version

exif2css Converts EXIF Orientation To CSS Transform Rules (in 772 bytes gzipped).

yarn add -E exif2css


Table Of Contents


The package is available by importing its default function:

import exif2css from 'exif2css'

  orientation: (number|string),
): Exif2CssReturn

Converts an integer or a string representing EXIF orientation into required CSS with transfrom and optionally transform-origin properties. They can then be used as needed, possibly prefixing the rules with browser-specific tags (e.g., -webkit-transform and -webkit-transform-origin).

One known issue is that with orientations > 4, the transformed image will have different dimensions from its box, so that whitespace might appear on the right and at the bottom of the image.

import exif2css from 'exif2css'

['not-an-exif-orientation', 1,2,3,4,5,6,7,8]
  .forEach((i) => {
    console.log('Orientation: %s', i)
    const result = exif2css(i)
Orientation: not-an-exif-orientation

Orientation: 1

Orientation: 2
{ transform: 'rotateY(180deg)',
  transforms: { rotateY: 180 },
  transformStrings: { rotateY: 'rotateY(180deg)' } }

Orientation: 3
{ transform: 'rotate(180deg)',
  transforms: { rotate: 180 },
  transformStrings: { rotate: 'rotate(180deg)' } }

Orientation: 4
{ transform: 'rotate(180deg) rotateY(180deg)',
  transforms: { rotate: 180, rotateY: 180 },
  transformStrings: { rotate: 'rotate(180deg)', rotateY: 'rotateY(180deg)' } }

Orientation: 5
{ transform: 'rotate(270deg) rotateY(180deg)',
  'transform-origin': 'top left',
  transforms: { rotate: 270, rotateY: 180 },
  transformStrings: { rotate: 'rotate(270deg)', rotateY: 'rotateY(180deg)' } }

Orientation: 6
{ transform: 'translateY(-100%) rotate(90deg)',
  'transform-origin': 'bottom left',
  transforms: { translateY: -1, rotate: 90 },
  transformStrings: { translateY: 'translateY(-100%)', rotate: 'rotate(90deg)' } }

Orientation: 7
{ transform: 'translateY(-100%) translateX(-100%) rotate(90deg) rotateY(180deg)',
  'transform-origin': 'bottom right',
  transforms: { translateY: -1, translateX: -1, rotate: 90, rotateY: 180 },
   { translateY: 'translateY(-100%)',
     translateX: 'translateX(-100%)',
     rotate: 'rotate(90deg)',
     rotateY: 'rotateY(180deg)' } }

Orientation: 8
{ transform: 'translateX(-100%) rotate(270deg)',
  'transform-origin': 'top right',
  transforms: { translateX: -1, rotate: 270 },
  transformStrings: { translateX: 'translateX(-100%)', rotate: 'rotate(270deg)' } }

Exif2CssReturn: The return type of the function.

Name Type Description
transform string The complete CSS transform rule that contains all transforms.
transform-origin ('top left'|'top right'|'bottom left'|'bottom right') The transform origin CSS rule for orientations >= 5.
transforms {translateY: number, translateX: number, rotate: number, rotateY: number} The raw transforms as numbers, where translates are either -1 or 1 and rotations are either 90, 180 and 270.
transformStrings {translateY: string, translateX: string, rotate: string, rotateY: string} The transforms split by individual rules that can be applied in the browser.


The module can be either required in Node.JS, or downloaded as the compiled file from the dist folder and inserted on the webpage.

As Node Module

The package is published both as CommonJS module with the main field, and as a ES6 module with the module field. Node will automatically pick up the main version, whereas some bundles will be able to use the module.

yarn add -E exif2css
npm i exif2css
import exif2css from 'exif2css' // or
const exif2css = require('exif2css')

const css = exif2css(6)

As Script

Exif2Css has been compiled with Depack using Google Closure Compiler. Download the file manually and embed it on the webpage.

<img src="some-image.jpg">
<script src="exif2css.js"></script>
  var img = document.querySelector('img')
  var orientation = 6
  var css = exif2css(orientation)

  if (css.transform) {
      img.style.transform = css.transform
  if (css['transform-origin']) {
      img.style['transform-origin'] = css['transform-origin']


The module has been automatically tested in Chrome by inserting pre-compiled images with set orientation, applying generated styles from exif2css, taking screenshots and comparing them against the expected image, therefore everything works properly.

Testing exif2css diff


(c) Demimonde 2019