Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html, body {
- font-family: 'Roboto';
- height: 100%;
- padding: 0;
- margin: 0;
- }
- body {
- background: linear-gradient(90deg, #0099FF 0%, #6610f2 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- color: #fff;
- font-size: 25px;
- text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
- font-weight: 700;
- }
- .container {
- width: 200px;
- height: 200px;
- perspective: 600px;
- }
- .cube {
- position: relative;
- width: 200px;
- height: 200px;
- transform-style: preserve-3d;
- transition: transform 1s;
- cursor: pointer;
- }
- .cube:hover {
- transform: rotateY(-180deg);
- }
- .cube-side {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 200px;
- height: 200px;
- position: absolute;
- box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
- }
- .front {
- transform: translate3d(0, 0, 100px);
- background: #ffbe00;
- }
- .back {
- transform: rotateY(180deg) translate3d(0, 0, 100px);
- background: #ffbe00;
- color: #fff;
- }
- .right {
- background: #FFD773;
- transform: rotateY(90deg) translate3d(0, 0, 100px);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement