Do it yourself: CSS für Profil und Blog RSS

#frame {
    -moz-perspective: 1000px;
    border: 1px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 200px;
    margin-left: 40%;
    margin-top: 100px;
    position: absolute;
    width: 150px;
    z-index: 1;
}
#frame a {
    color: #ffffff;
}
#frame_card {
    -moz-transform-style: preserve-3d;
    -moz-transition: all 2s linear 0s;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 2s linear 0s;
    -o-transform-style: preserve-3d;
    -o-transition: all 2s linear 0s;
    -ms-transform-style: preserve-3d;
    -ms-transition: all 2s linear 0s;
    transform-style: preserve-3d;
    transition: all 2s linear 0s;
    border-radius: 10px 10px 10px 10px;
    height: 100%;
    width: 100%;



animation-name:roomy;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-moz-animation-name:roomy;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-webkit-animation-name:roomy;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-o-animation-name:roomy;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;

-ms-animation-name:roomy;
-ms-animation-duration:5s;
-ms-animation-timing-function:linear;
-ms-animation-delay:2s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:alternate;
-ms-animation-play-state:running;

}
#frame:hover #frame_card, #frame.hover_effect #frame_card {
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-shadow: 0px 0px 0px #00ccff;

    -moz-animation-name:none;
    -webkit-animation-name:none;
    -o-animation-name:none;
    -ms-animation-name:none;
    animation-name:none;

}
.topstock {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid #00CCFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow:0px 0px 50px #00ccff;
    height: 100%;
    position: absolute;
    width: 100%;}
.topstock.back {
    -moz-box-sizing: border-box;
    -moz-transform: rotateY(180deg);
    -webkit-box-sizing: border-box;
    -webkit-transform: rotateY(180deg);
    -o-box-sizing: border-box;
    -o-transform: rotateY(180deg);
    -ms-box-sizing: border-box;
    -ms-transform: rotateY(180deg);
    box-sizing: border-box;
    transform: rotateY(180deg);
    background-color: #000000;
    border: 1px solid #00CCFF;
    border-radius: 10px 10px 10px 10px;
    color: white;
    opacity: 0.6;
    padding: 10px;
    text-align: center;
    width: 150px;
    text-shadow:0px 0px 5px #00ccff;}
.front topstock img {padding:30px;}
#ima {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://www.deluxe-stylez.de/wp-content/uploads/2011/12/Backtrack-Black-Dragon-Wallpaper.jpg");
    background-origin: padding-box;
    background-position: 0px 10px;
    background-repeat: no-repeat;
    background-size: 150px auto;
}
#ima a {color:#ffffff; text-align:center;}
#mo {color:#ffffff}

@-moz-keyframes roomy 
{
0% {-moz-transform: scale(1, -1)}
25% {-moz-transform: scale(1, -0.5)}
50% {-moz-transform: scale(1, 0)}
75% {-moz-transform: scale(1, 0.5)}
100% {-moz-transform: scale(1, 1)}
}

@-webkit-keyframes roomy 
{
0% {-webkit-transform: scale(1, -1)}
25% {-webkit-transform: scale(1, -0.50)}
50% {-webkit-transform: scale(1, 0)}
75% {-webkit-transform: scale(1, 0.5)}
100% {-webkit-transform: scale(1, 1)}
}

@-o-keyframes roomy 
{
0% {-o-transform: scale(1, -1)}
25% {-o-transform: scale(1, -0.5)}
50% {-o-transform: scale(1, 0)}
75% {-o-transform: scale(1, 0.5)}
100% {-o-transform: scale(1, 1)}
}


@-ms-keyframes roomy 
{
0% {-ms-transfmsrm: scale(1, -1)}
25% {-ms-transfmsrm: scale(1, -0.5)}
50% {-ms-transfmsrm: scale(1, 0)}
75% {-ms-transfmsrm: scale(1, 0.5)}
100% {-ms-transfmsrm: scale(1, 1)}
}


@keyframes roomy 
{
0% {transfmsrm: scale(1, -1)}
25% {transfmsrm: scale(1, -0.5)}
50% {transfmsrm: scale(1, 0)}
75% {transfmsrm: scale(1, 0.5)}
100% {transfmsrm: scale(1, 1)}
}

<div>
        <div class="hover" id="frame">
        <div class="shadow" id="frame_card">
        <div class="front topstock">
        <div id="ima">






            <div id="mo">
        

            <marquee scrollamount="3" direction="right" behavior="scroll">Make</marquee>


            <marquee scrollamount="7" direction="left" behavior="scroll">a</marquee>


            <marquee scrollamount="4" direction="right" behavior="scroll">choice</marquee>


            </div>
        </div>
        </div>
            <div class="back topstock center">
            


            <p><a href="http://www.allmystery.de/">>> Wake up <<</a></p>
            <p>or</p>
            <p><a href="http://www.allmystery.de/">>> die slow <<</a></p>
            </div>
        </div>
    </div>