正在仿写阴阳师的官网首页,发现它涉及到了这个功能,所以记录一下
这是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 */
}
```、
下面是我写的实际运用
<div class="se-preview-section-delimiter"></div>
.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;
记录到这里,我发现了我对它的运用太少,明天我会详解深入的去了解学习一下这个知识点,我们共勉。