Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #siteTable {
- perspective: 1000px;
- }
- #siteTable > .thing {
- margin-top: 20px;
- margin-bottom: 20px;
- width: 200px;
- height: 200px;
- left: 50%;
- position: relative;
- display: inline-block;
- margin-right: 100px;
- transform-style: preserve-3d;
- animation: spincube 10s ease-in-out infinite;
- -webkit-animation: spincube 10s ease-in-out infinite;
- -moz-animation: spincube 10s ease-in-out infinite;
- left: 50px;
- }
- #siteTable .clearleft {
- display: none;
- }
- body #siteTable .thing > * {
- width: 200px;
- height: 200px;
- display: block;
- position: absolute;
- border: 2px solid black;
- margin: 0;
- padding: 0;
- }
- #siteTable .thing > * {
- background-color: white;
- }
- #siteTable .thing > * .arrow {
- transform: scale(3);
- }
- #siteTable .thing > * .arrow.up, #siteTable .thing > * .arrow.upmod {
- margin-top: 18px;
- }
- #siteTable .thing > .entry .flat-list {
- position: absolute;
- bottom: 0;
- }
- #siteTable .thing > *:nth-child(5) {
- transform: rotateY( 0deg ) translateZ( 100px );
- }
- #siteTable .thing > *:nth-child(2) {
- transform: rotateX( 180deg ) translateZ( 100px ) rotateZ(180deg);
- }
- #siteTable .thing > *:nth-child(3) {
- transform: rotateY( 90deg ) translateZ( 100px );
- font-size: 82pt;
- }
- #siteTable .thing > *:nth-child(4) {
- transform: rotateY( -90deg ) translateZ( 25px ) scale(4);
- width: 47px;
- height: 47px;
- margin-top: 77px;
- }
- #siteTable .thing > *:nth-child(1) {
- transform: rotateX( 90deg ) translateZ( 100px );
- }
- #siteTable .thing > *:nth-child(6) {
- transform: rotateX( -90deg ) translateZ( 100px );
- }
- #siteTable .thing > *:nth-child(7) {
- visibility: hidden;
- }
- @keyframes spincube {
- 0% {
- transform: rotateY(-90deg);
- }
- 50% {
- transform: rotateY(90deg);
- }
- 100% {
- transform: rotateY(-90deg);
- };
- }
- @-webkit-keyframes spincube {
- 0% {
- transform: rotateY(-90deg);
- }
- 50% {
- transform: rotateY(90deg);
- }
- 100% {
- transform: rotateY(-90deg);
- };
- }
- @-moz-keyframes spincube {
- 0% {
- transform: rotateY(-90deg);
- }
- 50% {
- transform: rotateY(90deg);
- }
- 100% {
- transform: rotateY(-90deg);
- };
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement