HTML阴影旋转移动

HTML代码

<div class="d1"></div>

css代码

<style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            box-shadow: -10px 10px 10px rgba(0,0,0,.2);
            /*值：第一个：水平方向的移动(必选)
                第二个：垂直方向的移动(必选)
                第三个：模糊的程度(可选)
                第四个：颜色(可选)*/
            transition: 1s;/*过渡效果，后面的取值：秒数*/
        }
        .d1:hover{
            /*transform: rotate(45deg);2d效果*/
            /*3d效果
            translateX(20px)--水平方向的移动
            translateY(20px)--垂直方向的移动
            translate3d(20px,20px,20px)*/
            /*transform: translateX(20px);
            transform: translateY(20px);*/
            transform: translate3d(20px,20px,20px);
        }
    </style>