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>