cssrotationbox-shadow

Only CSS rotate box-shadow without original element


I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem.

My code:

.item {
    box-shadow: -50px 80px 4px 10px #555;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

Solution

  • Most flexible answer using only CSS is probably this:

    .item {
        position: relative; /* or absolute */
    }
    
    .item:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
    
        box-shadow: -50px 80px 4px 10px #555;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        transform: rotate(10deg);
    }