Geek asks and answers

CSS3 curved shadow appears in front of the tile when the tile is rotated or assigned a z-index

I wonder if you could help me solve the problem that I encounter with a shadow on my tile, the shadow sits behind the tile in order until I add a rotation or z-index to the tile .tile, can someone advise me on , How to solve this problem?

SCSS

body {
  background: lightBlue;
}

.tile {
  background: white;
  width: 25%;
  height: 150px;
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 6;
  @include transform(rotate(15.5deg));

  &::before,
  &::after {
    content: '';
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    @include box-shadow(0 15px 10px rgba(0, 0, 0, 0.5));
    position: absolute;
    z-index: -2;
  }

  &::before {
    left: 10px;
    @include transform(rotate(-3deg));
  }

  &::after {
    right: 10px;
    @include transform(rotate(3deg));
  }
}

Codepen : http://codepen.io/styler/pen/bmozr

+3
source share
1 answer

You can solve this in modern browsers, at least to create three-dimensional space (z-index will not work).

SCSS

.tile {
  background: white;
  width: 25%;
  height: 150px;
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: 6;
  @include transform(rotate(15.5deg));
  @include transform-style(preserve-3d);    // added

  &::before,
  &::after {
    content: '';
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    @include box-shadow(0 15px 10px rgba(0, 0, 0, 0.5));
    position: absolute;
    z-index: -2;
  @include transform-style(preserve-3d);          // added
  }

  &::before {
    left: 10px;
    @include transform(rotate(-3deg) translateZ(-10px));    // moved in z
  }

  &::after {
    right: 10px;
    @include transform(rotate(3deg) translateZ(-10px));    // moved in z
  }

demonstration

I clicked the shadows behind the main div.

IE 3d, , : -)

. , IE:

CSS

.test {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 40px;
    top: 40px;
    border: solid 1px green;
    background-color: white;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}

.test:after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0px;
    bottom: -10px;
    left: 0px;
    background: linear-gradient(-5deg, transparent 15px, gray 25px), linear-gradient(5deg, transparent 15px, gray 25px);
    background-size: 50% 100%;
    background-position: 6% 0%, 94% 0%;
    background-repeat: no-repeat;
}

+2

More articles:


All Articles