css-利用transform使悬浮图片移动

正在仿写阴阳师的官网首页，发现它涉及到了这个功能，所以记录一下

---

这是W3C中的一个例子，实际运用起来，千变万化。
旋转 div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);    /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */
}
```、

下面是我写的实际运用

.wrap2 .yys-list li:hover{
transition-property: all;/所有属性都获得效果/
transition-duration: 0.5s;/规定完成过渡效果需要花费的时间/
transition-timing-function: linear;/规定以相同速度开始至结束的过渡效果/
transition-delay: 0s;/* 定义过渡效果何时开始*/
transform: translateY(-10px);
}
“`

.wrap2 .yys-list li:hover{
    transition-property: all;/*所有属性都获得效果*/
    transition-duration: 0.5s;/*规定完成过渡效果需要花费的时间*/
    transition-timing-function: linear;/*规定以相同速度开始至结束的过渡效果*/
    transition-delay: 0s;/* 定义过渡效果何时开始*/
    transform: translateY(-10px);
}

它的作用，就是Y轴向上移动10px；
记录到这里，我发现了我对它的运用太少，明天我会详解深入的去了解学习一下这个知识点，我们共勉。