css变换效果，css属性

通过CSS3 transform实现图片浏览的几种效果

通过css3和DOM操作，可以实现多种图片浏览的效果 但是大致思路都是一致的：

1）通过DOM操作循环创建出来一组元素

    document.createElement('标签名')；

    父级.appendChild('obj');

2）给每一个创建出来的元素添加transform变换效果

    obj.style.transform=' rotateX(30deg)';

    obj.style.transition='1s all ease';

3）当变换结束的时候，瞬间拉回变换并换底图

    obj.addEventListener('transitionend',function(){},false};

    obj.style.transform=' rotateX(0deg)';

    obj.style.transition='none';

  当前要显示的一面：url("img/'+iNow%3+'.jpg")；

  即将要显示的一面：url("img/'+(iNow+1)%3+'.jpg")；

4）对用户一些影响当前变换的操作进行约束

分散效果重点：

每一个小块的transform：translate('+(aSpan[i].offsetLeft-oBox.offsetWidth/2)+'px,'+(aSpan[i].offsetTop -oBox.offsetHeight/2)+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4);

每个小块的transform: aSpan[i].style.transform='perspective(800px) rotateY(-180deg)';

transition: aSpan[i].style.transition='500ms all ease '+(aSpan[i].c+aSpan[i].r)*200+'ms';

第四个参数代表等待运动的时间，故生成依次轮流翻转的效果

document.onmouseover=function(){

当前那个元素的transform：rotateZ(90deg);

};

依次出现的效果：

oBj.style.transform ='rotateY('+i*360/N+'deg) translateZ(300px)';

布局如下：

div id="box"

    div id="page"

        div class="front"/div

        div class="back"/div

    /div

    div id="page2"/div

/div

#page是当前的图片 ，#page2是将要变换的图片，其中#page的front背景图片和#box的背景图片拼成一张当前显示的图片，#page的back背景图片和#page2的背景图片拼成一张即将要换的图片

相关问答

Q1: 怎么用用css的方法做出上下门移动的效果？

要在CSS中实现上下门的移动效果，你可以使用CSS的transform属性来设置门的位移效果。

以下是一个简单的例子，假设你有一个类名为door的HTML元素，希望实现上下移动效果：

Copy code.door { transform: translateY(-100px); transition: transform 1s;

}.door.open { transform: translateY(0);

}

在上面的CSS代码中，我们使用了transform属性的translateY方法来实现垂直移动，并使用了transition属性来设置动画过渡效果。我们还定义了一个类名为open的状态，在这个状态下，门的位置会发生改变，从而实现上下移动的效果。

要在HTML代码中触发这个状态，你可以使用JavaScript来添加或删除open类名：

Copy codedocument.querySelector('.door').classList.add('open');document.querySelector('.door').classList.remove('open');

希望这些信息能帮助你实现所需的上下门移动效果。

Q2: 怎样在css中设置链接鼠标移上去变换颜色的效果？

在CSS中，分别给这3个链接的标签设置不同的CSS样式。\x0d\x0a我假设你对这三个链接已经给了各自的id: "linka" 、"linkb"、 "linkc"\x0d\x0a然后对这3个链接进行CSS设置：\x0d\x0a#linka a:hover{color:pink;}\x0d\x0a#linkb a:hover{color:pink;}\x0d\x0a#linkc a:hover{color:gray;}\x0d\x0a\x0d\x0a这样即可。

关于css变换效果和css属性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。