transform-properties-mixed-expected.html

<!DOCTYPE html>
<style>
.container {
   width: 200px;
   height: 200px;
   margin: 75px 0 0 75px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
   perspective: 500px;
}
.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}
.front {
   background: rgba(0, 0, 0, 0.3);
   transform: translate3d(0, 0, 50px);
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: translate3d(0, 0, -50px) rotate3d(0, 1, 0, 180deg);
}
.right {
   background: rgba(196, 0, 0, 0.7);
   transform: translate3d(50px, 0, 0) rotate3d(0, 1, 0, 90deg);
}
.left {
   background: rgba(0, 0, 196, 0.7);
   transform: translate3d(-50px, 0, 0) rotate3d(0, 1, 0, -90deg);
}
.top {
   background: rgba(196, 196, 0, 0.7);
   transform: translate3d(0, -50px, 0) rotate3d(1, 0, 0, 90deg);
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: translate3d(0, 50px, 0) rotate3d(1, 0, 0, -90deg);
}
.scaleX {
    transform: scale3d(0.5, 1, 1);
}
.scaleY {
    transform: scale3d(1, 0.5, 1);
}
.scaleZ {
    transform: scale3d(1, 1, 0.5);
}
</style>

<div class="container">
    <div class="cube scaleY">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
    <div class="cube scaleX scaleZ">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
    </div>
</div>
chromium/third_party/blink/web_tests/transforms/transform-properties-mixed-expected.html
