flip-style.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. 
  2. .flip-box {
  3. display: inline-block;
  4. position: absolute;
  5. height: inherit;
  6. text-align: center;
  7. width: inherit;
  8. transform-style: preserve-3d;
  9. backface-visibility: hidden;
  10. /* width: 70px;
  11. height: 50px;*/
  12. -moz-border-radius: 10px;
  13. /*-webkit-border-radius: 10px;*/
  14. /*border-radius: 10px;*/
  15. }
  16. .icon-one:before,
  17. .icon-one:after {
  18. /* content: '';
  19. position: absolute;
  20. border-bottom: 30px solid red;
  21. border-left: 10px solid transparent;
  22. border-right: 10px solid transparent;
  23. top: 30px;
  24. left: 20px;
  25. transform: rotate(-140deg);*/
  26. }
  27. .icon-four:before,
  28. .icon-four:after {
  29. }
  30. .icon-three:before,
  31. .icon-three:after {
  32. }
  33. .icon-two:before,
  34. .icon-two:after {
  35. }
  36. .icon-one {
  37. /* background-image: linear-gradient(to bottom right, red, #D413138A);*/
  38. }
  39. .icon-two {
  40. /*background-image: linear-gradient(to bottom right, red, #D413138A);*/
  41. }
  42. .icon-three {
  43. /*background-image: linear-gradient(to bottom right, red, #D413138A);*/
  44. }
  45. .icon-four {
  46. /*background-image: linear-gradient(to bottom right, red, #D413138A);*/
  47. }