donovanh/donovanh.github.com — pull request #1 by adam-lynch (2013-03-31 15:15:20+00:00)
Title: Added shimmer/glare

I added a little shimmer / glare as the phone rotates (with CSS, obviously didn't edit the images to remove the static glare).

FYI, I did this in Chrome's dev tools as pure CSS and then re-wrote it as SASS, just in case there's a syntax error. I use LESS usually, so I've no idea how to use SASS' `radial-gradient()` mixin. Especially because there's no entry for it in the SASS documentation. That's why I'm given each vendor-specific rule here. It would be handy if you knew if `radial-gradient()` could ouput those dynamically.

---

Just as reference (in case there's a SASS syntax mistake), this is the desired CSS:

```css
.phone-container {
margin: 100px auto;
width: 251px;
height: 537px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}

.phone-container * {
position: absolute;
-webkit-transition: all 1500ms;
-moz-transition: all 1500ms;
-o-transition: all 1500ms;
transition: all 1500ms;
}
.phone-container .phone {
left: 125px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-80deg);
-moz-transform: rotateY(-80deg);
-ms-transform: rotateY(-80deg);
-o-transform: rotateY(-80deg);
transform: rotateY(-80deg);
-webkit-animation: rotate-phone 5s linear infinite;
-moz-animation: rotate-phone 5s linear infinite;
-ms-animation: rotate-phone 5s linear infinite;
-o-animation: rotate-phone 5s linear infinite;
animation: rotate-phone 5s linear infinite;
}

.phone-container .front {
width: 251px;
height: 537px;
background: url(/images/phone_parts/front.png) no-repeat;
-webkit-transform: translateX(-125px) rotateY(0deg) translateZ(14px);
-moz-transform: translateX(-125px) rotateY(0deg) translateZ(14px);
-ms-transform: translateX(-125px) rotateY(0deg) translateZ(14px);
-o-transform: translateX(-125px) rotateY(0deg) translateZ(14px);
transform: translateX(-125px) rotateY(0deg) translateZ(14px);
}

.front:after, .back:after{

-webkit-animation: shimmer 2.5s ease-in-out infinite;
-moz-animation: shimmer 2.5s ease-in-out infinite;
-ms-animation: shimmer 2.5s ease-in-out infinite;
-o-animation: shimmer 2.5s ease-in-out infinite;
animation: shimmer 2.5s ease-in-out infinite;

content:' ';
position: absolute;
top:-400%;
left:0;
width:200%;
height:800%;
opacity:0;

background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 25%); /* FF3.6+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 25%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 25%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 25%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 25%); /* W3C */

}

.phone-container .back {
width: 251px;
height: 537px;
background: url(/images/phone_parts/back.png) no-repeat;
-webkit-transform: translateX(-125px) rotateY(180deg) translateZ(13px);
-moz-transform: translateX(-125px) rotateY(180deg) translateZ(13px);
-ms-transform: translateX(-125px) rotateY(180deg) translateZ(13px);
-o-transform: translateX(-125px) rotateY(180deg) translateZ(13px);
transform: translateX(-125px) rotateY(180deg) translateZ(13px);
}
.phone-container .left {
width: 31px;
height: 537px;
background: url(/images/phone_parts/left_side.png) no-repeat;
-webkit-transform: translateX(-138px) rotateY(-90deg);
-moz-transform: translateX(-138px) rotateY(-90deg);
-ms-transform: translateX(-138px) rotateY(-90deg);
-o-transform: translateX(-138px) rotateY(-90deg);
transform: translateX(-138px) rotateY(-90deg);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.phone-container .left-top {
background: black;
width: 29px;
height: 30px;
top: 4px;
-webkit-transform: translateX(-129px) rotateY(-90deg) rotateX(30deg);
-moz-transform: translateX(-129px) rotateY(-90deg) rotateX(30deg);
-ms-transform: translateX(-129px) rotateY(-90deg) rotateX(30deg);
-o-transform: translateX(-129px) rotateY(-90deg) rotateX(30deg);
transform: translateX(-129px) rotateY(-90deg) rotateX(30deg);
}
.phone-container .left-bottom {
background: black;
width: 29px;
height: 25px;
-webkit-transform: translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg);
-moz-transform: translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg);
-ms-transform: translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg);
-o-transform: translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg);
transform: translateX(-131px) translateY(490px) rotateY(-90deg) rotateX(-30deg);
}
.phone-container .right {
width: 31px;
height: 537px;
background: url(/images/phone_parts/right_side.png) no-repeat;
-webkit-transform: translateX(105px) rotateY(90deg);
-moz-transform: translateX(105px) rotateY(90deg);
-ms-transform: translateX(105px) rotateY(90deg);
-o-transform: translateX(105px) rotateY(90deg);
transform: translateX(105px) rotateY(90deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.phone-container .right-top {
background: black;
width: 29px;
height: 29px;
top: 4px;
-webkit-transform: translateX(98px) rotateY(-90deg) rotateX(-30deg);
-moz-transform: translateX(98px) rotateY(-90deg) rotateX(-30deg);
-ms-transform: translateX(98px) rotateY(-90deg) rotateX(-30deg);
-o-transform: translateX(98px) rotateY(-90deg) rotateX(-30deg);
transform: translateX(98px) rotateY(-90deg) rotateX(-30deg);
}
.phone-container .right-bottom {
background: black;
width: 29px;
height: 25px;
-webkit-transform: translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg);
-moz-transform: translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg);
-ms-transform: translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg);
-o-transform: translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg);
transform: translateX(100px) translateY(490px) rotateY(-90deg) rotateX(30deg);
}
.phone-container .shadow {
width: 250px;
height: 20px;
-webkit-transform: translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px);
-moz-transform: translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px);
-ms-transform: translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px);
-o-transform: translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px);
transform: translateX(-125px) translateY(530px) rotateX(90deg) translateY(-60px);
-webkit-box-shadow: 0 60px 60px black;
-moz-box-shadow: 0 60px 60px black;
box-shadow: 0 60px 60px black;
}

@-moz-keyframes rotate-phone {
0% {
-moz-transform: rotateY(0);
transform: rotateY(0);
}

100% {
-moz-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@-webkit-keyframes rotate-phone {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}

100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@-o-keyframes rotate-phone {
0% {
-o-transform: rotateY(0);
transform: rotateY(0);
}

100% {
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@-ms-keyframes rotate-phone {
0% {
-ms-transform: rotateY(0);
transform: rotateY(0);
}

100% {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}

@keyframes rotate-phone {
0% {
transform: rotateY(0);
}

100% {
transform: rotateY(360deg);
}
}

@-webkit-keyframes shimmer {
45% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0.4;
}

55% {
-webkit-transform: translateX(-100%);
transform: translateX(100%);
opacity:0;
}
}

@-moz-keyframes shimmer {
45% {
-moz-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0.4;
}

55% {
-moz-transform: translateX(100%);
transform: translateX(100%);
opacity:0;
}
}

@-ms-keyframes shimmer {
45% {
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0.4;
}

55% {
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity:0;
}
}

@-o-keyframes shimmer {
45% {
-o-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0.4;
}

55% {
-o-transform: translateX(100%);
transform: translateX(100%);
opacity:0;
}
}

@keyframes shimmer {
45% {
transform: translateX(-100%);
opacity: 0.4;
}

55% {
transform: translateX(100%);
opacity:0;
}
}
```