Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**sphere 5*/
- body{
- height: 100%;
- }
- .container {
- top:50%;
- margin:auto;
- margin-top: -100px;
- width: 200px;
- height: 200px;
- position: relative;
- perspective: 800;
- }
- .bg{
- width:inherit;
- height: inherit;
- box-shadow: 0 0 0 30px black;
- position: absolute;
- border-radius: 50%;
- }
- #card {
- width: inherit;
- height: inherit;
- position: absolute;
- /*transition: all 0.6s ease-in-out;*/
- }
- #card div{
- position: absolute;
- width: inherit;
- height: inherit;
- border-radius: 50%;
- }
- #card .front {
- background: red;
- transition: all 0.6s ease-in-out;
- }
- #card .back {
- opacity:0;
- background: blue;
- transform: scale(1.5);
- transition: all 0.6s ease-in-out;
- }
- .container:hover #card .front{
- transform: scale(0);
- opacity :0;
- }
- .container:hover #card .back{
- transform: scale(1);
- opacity :1;
- }
Add Comment
Please, Sign In to add comment