Testing Across Multiple Browsers - CSS3 Foundations - page 250

Unfortunately, Microsoft chose to support the nonprefixed transform property despite not yet supporting
transform-style: preserve-3d . This means that you can't simply remove the prefixed -ms-transform
property to fall back to a 2D sidebar because the nonprefixed transform property is still applied. You could re-
move the transform property too, but then all other browsers that do support transform-style: pre-
serve-3d would also lose out on the 3D sidebar.
This situation is somewhat frustrating. Microsoft shouldn't really have decided to support the nonprefixed trans-
form property until the prefixed -ms-transform property worked fully. You can work around this issue,
however:
1. In styles.css, find the .sidebar rule set and delete the following declaration:
-ms-transform: rotateY(-40deg);
2. In the same rule set, below the transform: rotateY(-40deg); declaration, add the following:
-ms-transform: none;
3. In the .sidebar .aside:hover rule set, delete the following declaration:
-ms-transform: rotateY(-40deg);
4. In the same rule set, below the transform: rotateY(-40deg); declaration, add the following:
-ms-transform: none;
5. In the .sidebar .aside:nth-child(3):hover rule set, delete the following declaration:
-ms-transform: rotateY(40deg) translateX(-50px) scaleZ(2) trans-
lateZ(100px);
6. In the same rule set, below the transform: rotateY(40deg) translateX(-50px)
scaleZ(2) translateZ(100px); declaration, add the following:
-ms-transform: none;
7. Save styles.css.
The .sidebar rule set now looks like this:
.sidebar {
float: right;
width: 25%;
-webkit-transform: rotateY(-40deg);
-moz-transform: rotateY(-40deg);
-o-transform: rotateY(-40deg);
transform: rotateY(-40deg);
-ms-transform: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}