In Rc.1 Some Styles Can't Be Added Using Binding Syntax

In RC.1 some styles can't be added using binding syntax

update (2.0.0 final)

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml implements PipeTransform {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
    // return this.sanitizer.bypassSecurityTrustHtml(html);
    // return this.sanitizer.bypassSecurityTrustScript(html);
    // return this.sanitizer.bypassSecurityTrustUrl(html);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}

See also https://angular.io/api/platform-browser/DomSanitizer

<div [innerHTML]="someHtml | safeHtml"

update

DomSanitizationService is going to be renamed to DomSanitizer in RC.6

original

This should be fixed in RC.2

See also Angular2 Developer Guide - Security

Angular2 intruduced sanitization of CSS values and property binding like [innerHTML]=... and [src]="..." in RC.1

See also https://github.com/angular/angular/issues/8491#issuecomment-217467582

The values can be marked as trusted by using DomSanitizer.bypassSecurityTrustStyle(...)

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  // for HTML
  // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}

and binding to this value instead the untrusted plain string.

This can also be wrapped in a pipe like

@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

<div [ngStyle]="someStyle | safeStyle"></div>

with

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

is still working though :-[ (it's work in progress)

Plunker example (Angular 2.0.0-rc-1)

See also Angular 2 Security Tracking Issue

and https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

Hint about {{...}}

Sanitized content can't be bound using prop="{{sanitizedContent}}" because {{}} stringyfies the value before it is assigned which breaks sanitization.

Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

UPDATE: Angular2 RC6 onwards, DomSanitizationService has been renamed to DomSanitizer: https://stackoverflow.com/a/39462172/3481582

Original Answer

As you didn't find what you needed in the question I mentioned bellow, I'll try to answer it here.

The reason why you aren't being able to set style.transform is because angular has a sanitize process that prevents malicious code to be injected into your application.

In order to be able to include this style you'll have to tell angular to bypass this value.

First inject the sanitizer in the component constructor

constructor(private sanitizer: DomSanitizationService) {}

Then, use the bypassSecurityTrustStyle function to tell angular to bypass the desired style of the sanitize process.

this.safeTransform = sanitizer.bypassSecurityTrustStyle("rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )")

An then use it in your template

[style.transform]="safeTransform"

Angular documentation references
https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

Basically the exact same question as this:
In RC.1 some styles can't be added using binding syntax

The answer is also there.