A Pen by RahulDhiman on CodePen.
Created
November 4, 2016 04:02
-
-
Save CodeMyUI/1245e4a9c8740b77143740f61283a042 to your computer and use it in GitHub Desktop.
cube service box
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Service Box Style</title> | |
| <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Service box</h1> | |
| <div class="row"> | |
| <div class="col-md-3 col-sm-6 "> | |
| <div class="service-box"> | |
| <div class="service-icon yellow"> | |
| <div class="front-content"> | |
| <i class="fa fa-trophy"></i> | |
| <h3>design</h3> | |
| </div> | |
| </div> | |
| <div class="service-content"> | |
| <h3>design</h3> | |
| <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6 "> | |
| <div class="service-box"> | |
| <div class="service-icon orange"> | |
| <div class="front-content"> | |
| <i class="fa fa-anchor"></i> | |
| <h3>php</h3> | |
| </div> | |
| </div> | |
| <div class="service-content"> | |
| <h3>php developer</h3> | |
| <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6"> | |
| <div class="service-box "> | |
| <div class="service-icon red"> | |
| <div class="front-content"> | |
| <i class="fa fa-trophy"></i> | |
| <h3>Ui Developer</h3> | |
| </div> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Developer</h3> | |
| <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 col-sm-6"> | |
| <div class="service-box"> | |
| <div class="service-icon grey"> | |
| <div class="front-content"> | |
| <i class="fa fa-paper-plane-o"></i> | |
| <h3>java script</h3> | |
| </div> | |
| </div> | |
| <div class="service-content"> | |
| <h3>java script</h3> | |
| <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1{ | |
| font-size:25px; | |
| text-align: left; | |
| text-transform:capitalize; | |
| } | |
| .service-box{ | |
| position: relative; | |
| overflow: hidden; | |
| margin-bottom:10px; | |
| perspective:1000px; | |
| -webkit-perspective:1000px; | |
| } | |
| .service-icon{ | |
| width: 100%; | |
| height: 220px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: all .5s ease; | |
| } | |
| .service-content{ | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 1; | |
| opacity: 0; | |
| width: 100%; | |
| height: 220px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: all .5s ease; | |
| background-color: #474747; | |
| backface-visibility:hidden; | |
| transform-style: preserve-3d; | |
| -webkit-transform: translateY(110px) rotateX(-90deg); | |
| -moz-transform: translateY(110px) rotateX(-90deg); | |
| -ms-transform: translateY(110px) rotateX(-90deg); | |
| -o-transform: translateY(110px) rotateX(-90deg); | |
| transform: translateY(110px) rotateX(-90deg); | |
| } | |
| .service-box .service-icon .front-content{ | |
| position: relative; | |
| top:80px; | |
| -webkit-transform: translateY(-50%); | |
| -moz-transform: translateY(-50%); | |
| -ms-transform: translateY(-50%); | |
| -o-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .service-box .service-icon .front-content i { | |
| font-size: 28px; | |
| color: #fff; | |
| font-weight: normal; | |
| } | |
| .service-box .service-icon .front-content h3 { | |
| font-size: 15px; | |
| color: #fff; | |
| text-align: center; | |
| margin-bottom: 15px; | |
| text-transform: uppercase; | |
| } | |
| .service-box .service-content h3 { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: #fff; | |
| margin-bottom:10px; | |
| text-transform: uppercase; | |
| } | |
| .service-box .service-content p { | |
| font-size: 13px; | |
| color: #b1b1b1; | |
| margin:0; | |
| } | |
| .yellow{background-color: #ffc000;} | |
| .orange{background-color: #fc7f0c;} | |
| .red{background-color: #e84b3a;} | |
| .grey{background-color: #474747;} | |
| .service-box:hover .service-icon{ | |
| opacity: 0; | |
| -webkit-transform: translateY(-110px) rotateX(90deg); | |
| -moz-transform: translateY(-110px) rotateX(90deg); | |
| -ms-transform: translateY(-110px) rotateX(90deg); | |
| -o-transform: translateY(-110px) rotateX(90deg); | |
| transform: translateY(-110px) rotateX(90deg); | |
| } | |
| .service-box:hover .service-content { | |
| opacity: 1; | |
| -webkit-transform: rotateX(0); | |
| -moz-transform: rotateX(0); | |
| -ms-transform: rotateX(0); | |
| -o-transform: rotateX(0); | |
| transform: rotateX(0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey, I love the affect. However, I've had an issue that when I add it to my site, I can no longer scroll down on the pages I've added it to. I've checked and adjusted all Overflows and Positions as google suggests when you cannot scroll, however I cannot seem to make my page scroll again unless I remove this .css. See here for my exmaple: http://www.kimberleybrian.com/testing.html
UPDATE: Never mind, for some reason I added the following into the top of the css and it's fixed the problem.
body,html {height:100%; margin:0; padding:0; position: static; overflow: auto;}
Strange as no part of your code changes body or html defaults.
THANK YOU FOR EXCELLENT CODE