Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS ---------------------------------------------
- background:url(http://i.cubeupload.com/rlbagG.jpg);
- background-repeat:no-repeat;
- background-size:cover;
- }
- .flip-container {
- -webkit-perspective: 1000;
- -moz-perspective: 1000;
- -o-perspective: 1000;
- perspective: 1000;
- width:50%;
- margin:0 auto;
- }
- .flip-container:hover .flipper,
- .flip-container.hover .flipper {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- }
- .flip-container, .front, .back {
- width: 320px;
- height: 320px;
- margin-top:10%;
- }
- .flipper {
- -webkit-transition: 0.6s;
- -webkit-transform-style: preserve-3d;
- -moz-transition: 0.6s;
- -moz-transform-style: preserve-3d;
- -o-transition: 0.6s;
- -o-transform-style: preserve-3d;
- transition: 0.6s;
- transform-style: preserve-3d;
- position: relative;
- }
- .front, .back {
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- -o-backface-visibility: hidden;
- backface-visibility: hidden;
- border-radius:360px;
- position: absolute;
- top: 0;
- left: 0;
- }
- .front {
- background:url('http://i.cubeupload.com/X25wVt.jpg');
- z-index: 2;
- border-radius:360px;
- }
- .back {
- -webkit-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- transform: rotateY(180deg);
- background-color:rgba(0, 0, 0, 0.7);
- }
- .back-logo {
- position: absolute;
- top: 15px;
- left: 85px;
- width: 160px;
- height: 117px;
- background: url(http://i.cubeupload.com/iW3nzl.png) 0 0 no-repeat;
- }
- .back p {
- position: absolute;
- bottom: 90px;
- left: 0;
- right: 0;
- text-align: center;
- padding: 0 20px;
- line-height: 1em;
- color:white;
- font-size:15px;
- display:inline block;
- font-family:Arial;
- }
- .back-title {
- font-weight: bold;
- position: absolute;
- top: 130px;
- left: 0;
- right: 0;
- font-family: 'Raleway', sans-serif;
- font-size: 24px;
- color:white;
- text-align:center;
- font-weigth:12;
- }
- #box{
- height:300px;
- width:100%;
- HTML-------------------------------------------------
- <div class="flip-container">
- <div class="flipper">
- <div class="front">
- </div>
- <div class="back">
- <div class="back-logo"></div>
- <div class="back-title">keVin</div>
- <p>β 21 β Virgo β Dutchβ</p>
- </div>
- </div>
- </div>
- <div id="box">
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement