TA貢獻361條經驗 獲得超191個贊
做了一個旋轉的例子，如果要學習，這個課程可以幫到你 http://www.xianlaiwan.cn/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>
TA貢獻12條經驗 獲得超5個贊
可以使用CSS3中3D效果的rotateY()方法來實現。
建議先學習一下3D特效
http://www.xianlaiwan.cn/learn/77
舉報