http://www.cqguangrong.com/想写这个页面 案例那个图片旋转效果, 能不能给说一下思路,或者 谁有做这种效果的视频推荐一下也好 谢谢谢谢~~~
3 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
做了一个旋转的例子，如果要学习，这个课程可以帮到你 http://www.imooc.com/learn/77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.pic {
width: 200px;
height: 200px;
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 1s;
}
#face1, #face2 {
width: 200px;
height: 200px;
position: absolute;
}
#face1 {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background:blue;
}
#face2 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: red;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.pic-on {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all 1s;
}
</style>
<script>
window.onload=function(){
var pic=document.getElementsByClassName("pic")[0]
setTimeout(function(){
pic.className=pic.className+" pic-on"
},1000)
}
</script>
</head>
<body>
<div class="pic">
<div id="face1">正面</div>
<div id="face2">反面</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消