Use shorthand transform properties in CSS
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
README.md
index.js
package.json

README.md

Transform Shortcut PostCSS Logo

NPM Version Build Status Licensing Changelog Gitter Chat

Transform Shortcut lets you use shorthand transform properties in CSS, following the CSS Transform Module Level 2 Specification.

/* before */

.transform {
	transform: skewX(25deg);
	rotate: 180deg;
	scale: 2 2;
	translate: 10px 10px;
}

/* after */

.transform {
	transform: skewX(25deg) rotate3d(180deg,0,1) scale3d(2,2,1) translate3d(10px,10px,0px);
}

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of transform(), rotate() and scale() independent and acting in screen coordinates.

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a "2d rotation" in the plane of the screen.

The scale property accepts 1-3 values, each specifying a scale along one axis, in order X, Y, then Z. Unspecified scales default to 1.

The translate property accepts 1-3 values, each specifying a translation against one axis, in the order X, Y, then Z. Unspecified translations default to 0px.

Caveat

Once these new properties are supported natively, you can also use them to style transforms across multiple rules without overwriting a previous rule’s transforms. Unfortunately, I cannot predict how your CSS rules will be inherited without also knowing your DOM. Therefore, this particularly useful feature cannot be simulated at this time.

.button {
	rotate: 45deg;
}

.button--warn {
	scale: 2;
}

Usage

Add Transform Shortcut to your build tool:

npm install jonathantneal/postcss-transform-shortcut --save-dev

Node

require('postcss-transform-shortcut').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Transform Shortcut as a PostCSS plugin:

postcss([
	require('postcss-transform-shortcut')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Transform Shortcut within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () {
	return gulp.src('./src/*.css').pipe(
		postcss([
			require('postcss-transform-shortcut')({ /* options */ })
		])
	).pipe(
		gulp.dest('.')
	);
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Transform Shortcut within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-transform-shortcut')({ /* options */ })
			]
		},
		dist: {
			src: '*.css'
		}
	}
});