CSS Demos

Reference

Rotation
Rotation ( with perspective )
Modal
3D Rotation
3D Box
Flip Card
Content ( ::before / ::after )
Clearfix
Fancy Input
3D Bevel Emboss



Rotate (no perspective)




rotateX
rotateY
rotateZ



CSS:

  .rotate-x { animation: animate-x 5s infinite linear; }

  @keyframes animate-x {
    0% { transform: rotateX(0); }
    100% { transform: rotateX(360deg); }
  }

  /* same for y and z */





Rotate (with perspective)




perspective: 300px

rotateX
rotateY
rotateZ



CSS:

    .rotate-x {
      perspective: 300px;
      animation: animate-x 5s infinite linear;
    }

    @keyframes animate-x {
      0% { transform: rotateX(0); }
      100% { transform: rotateX(360deg); }
    }

    /* same for y and z */





3D rotation







HTML:

    <div id="logo">
      <div id="cube">
        <img src="your-image.png" id="front">
        <img src="your-image.png" id="back">
      </div>
    </div>


CSS:

    #logo { perspective: 800px; }
    #cube, #front, #back { height: 120; width: 120; }

    #cube {
      display: block;
      position: relative;
      margin: 30px auto;
      background: rgba(0, 0, 80, 0.5);
      background-blend-mode: luminosity;
      text-decoration: none;
      transform: rotate(0, 0, 0);
      transform-style: preserve-3d;
      animation: animate-y 5s infinite linear;
    }

    @keyframes animate-y {
      0% { transform: rotateY(0); }
      100% { transform: rotateY(360deg); }
    }

    #front, #back {
      position: absolute;
      backface-visibility: visible;
    }

    #front { transform: translateZ(50px); }
    #back { transform: rotateY(180deg) translateZ(50px); }





3D box




1 2 3 4 5 6

1
2
3
4
5
6


Flip Card








Rotate around an axis

1 2


Content




Use content: ""; with ::before and ::after pseudo-elements to get them to show up.
HTML:

				<div class="example">
					 ::before
					 <!-- HTML code goes here -->
					 ::after
				</div>


CSS:

	.example {
	  color: white;
	  background-color: tomato;
	}

	.example::before {
	  content: '::before';
	  background-color: cornflowerblue;
	}

	.example::after {
	  content: '::after';
	  background-color: mediumseagreen;
	}




You can use attr() to pull values from your html tags.
HTML:

				<a class="example"
				     href="http://vveleva.com/css_demos/#css-content"
				     memo="Anything you like!">
					  <!-- HTML code goes here -->
				</a>


CSS:

	.example::before {
	  content: attr(memo);
	}

	.example::after {
		content: attr(href);
	}




Use content to make a tooltip.
HTML:

				<div class="example" title="Tooltip box!">
					  <!-- HTML code goes here -->
				</div>


CSS:

	.example::before {
	  content: attr(title);
	  background-color: cornflowerblue;
	  top: -60px;
	  transform: translateX(-50%);
	  border-radius: 5px;
	}

	.example::after {
	  content: "";
	  background-color: cornflowerblue;
	  top: -30px;
	  transform: rotateZ(45deg);
	  left: 50%;
	  width: 20px;
	  height: 20px;
	}








Clearfix


No clearfix










With clearfix




HTML:

  <ul class="clearfix">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>


CSS:

	li {
  float: left;
  margin: 10px;
  background: green;
  padding: 20px;
  color: white;
	}

	.clearfix::after {
  content: "";
  display: block;
  clear: both;
	}







Margin vs Padding












Fancy Input
















3D Bevel Emboss