第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定

為什么按老師說的沒什么效果呢，望大神指點

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
#my3dspace {
?? ?-webkit-perspective:800px;
?? ?-moz-perspective:800px;
?? ?-ms-perspective:800px;
?? ?-o-perspective:800px;
?? ?perspective:800px;
?? ?-webkit-perspective-origin:50% 50%;
?? ?-moz-perspective-origin:50% 50%;
?? ?-ms-perspective-origin:50% 50%;
?? ?-o-perspective-origin:50% 50%;
?? ?perspective-origin:50% 50%;
?? ?overflow:hidden;}
#pagegroup{
?? ?width:400px;
?? ?height:400px;
?? ?margin:0 auto;
??? position:relative;
?? ?-webkit-transform-style:preserve-3d;
?? ?-moz-transform-style:preserve-3d;?? ?
?? ?-ms-transform-style:preserve-3d;
?? ?-o-transform-style:preserve-3d;
?? ?transform-style:preserve-3d;
?? ?}
.page{
?? ?width:360px;
?? ?height:360px;
?? ?padding:20px;
?? ?background-color:#000;
?? ?color:#FFF;
?? ?font-weight:bold;
?? ?font-size:360px;
?? ?line-height:360px;
?? ?text-align:center;
?? ?position:absolute;
?? ?}
#page1{
?? ?-webkit-transform-origin:bottom;
?? ?-moz-transform-origin:bottom;
?? ?-ms-transform-origin:bottom;
?? ?-o-transform-origin:bottom;
?? ?transform-origin:bottom;
?? ?-webkit-transition:-webkit-transform 1s linear;
?? ?-moz-transition:-moz-transform 1s linear;
?? ?-ms-transition:-ms-transform 1s linear;
?? ?-o-transition:-o-transform 1s linear;
?? ?transition:transform 1s linear;
?? ?}
#page2,#page3,#page4,#page5,#page6{
?? ?-webkit-transform-origin:bottom;
?? ?-moz-transform-origin:bottom;
?? ?-ms-transform-origin:bottom;
?? ?-o-transform-origin:bottom;
?? ?transform-origin:bottom;
?? ?-webkit-transition:-webkit-transform 1s linear;
?? ?-moz-transition:-moz-transform 1s linear;
?? ?-ms-transition:-ms-transform 1s linear;
?? ?-o-transition:-o-transform 1s linear;
?? ?transition:transform 1s linear;
?? ?-webkit-transform:rotateX(90deg);
?? ?-moz-transform:rotateX(90deg);
?? ?-ms-transform:rotateX(90deg);
?? ?-o-transform:rotateX(90deg);
?? ?transform:rotateX(90deg);?? ?}
#op{
?? ?text-align:center;
?? ?margin:40px auto;}
</style>
<script type="text/javascript">
?? var curIndex=1;
?? function next(){
?? ??? if(curIndex==6){
?? ???? return;}
?? ??? var curPage=document.getElementById("page"+curIndex);
?? ??? curPage.style.webkitTransform="rotateX(-90deg)";
?? ??? curPage.style.mozwebkitTransform="rotateX(-90deg)";
?? ??? curPage.style.mswebkitTransform="rotateX(-90deg)";
?? ??? curPage.style.owebkitTransform="rotateX(-90deg)";
?? ??? curPage.style.Transform="rotateX(-90deg)";
?? ??? curIndex ++;
?? ??? var nextPage=document.getElementById("page"+curIndex);
?? ??? nextPage.style.webkitTransform="rotateX(0deg)";
?? ??? nextPage.style.mozTransform="rotateX(0deg)";
?? ??? nextPage.style.msTransform="rotateX(0deg)";
?? ??? nextPage.style.oTransform="rotateX(0deg)";
?? ??? nextPage.style.Transform="rotateX(0deg)";
?? ?? }
? function prev(){
?? ??? if(curIndex==1){
?? ???? return;}
?? ??? var curPage=document.getElementById("page"+curIndex);
?? ??? curIndex.style.webkitTransform="rotateX(90deg)";
?? ??? curIndex.style.mozTransform="rotateX(90deg)";
?? ??? curIndex.style.msTransform="rotateX(90deg)";
?? ??? curIndex.style.oTransform="rotateX(90deg)";
?? ??? curIndex.style.Transform="rotateX(90deg)";
?? ??? curIndex --;
?? ??? var prevPage=document.getElementById("page"+curIndex);
?? ??? prevPage.style.webkitTransform="rotateX(0deg)";
?? ??? prevPage.style.mozTransform="rotateX(0deg)";
?? ??? prevPage.style.msTransform="rotateX(0deg)";
?? ??? prevPage.style.oTransform="rotateX(0deg)";
?? ??? prevPage.style.Transform="rotateX(0deg)";
?? ?? }
</script>

</head>

<body>
<div id="my3dspace">
? <div id="pagegroup">
???? <div class="page" id="page1">1</div>
???? <div class="page" id="page2">2</div>
???? <div class="page" id="page3">3</div>
???? <div class="page" id="page4">4</div>
???? <div class="page" id="page5">5</div>
???? <div class="page" id="page6">6</div>
? </div>
</div>
<div id="op">
?<a href="javascript:next()">next</a>&nbsp;<a href="javascript:prev()">previous</a>
?</div>
</body>
</html>

正在回答

3 回答

在各個瀏覽器上試了一下，其實可以不添加前綴的

0 回復(fù) 有任何疑惑可以回復(fù)我~

?簡單地說就是在prev()誤把curPage.style.webkitTransform="rotateX(90deg)";寫成curIndex.style.webkitTransform="rotateX(90deg)";

0 回復(fù) 有任何疑惑可以回復(fù)我~

希望您滿意此答案

<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
<style>
#my3dspace?{
????-webkit-perspective:800px;
????-moz-perspective:800px;
????-ms-perspective:800px;
????-o-perspective:800px;
????perspective:800px;
????-webkit-perspective-origin:50%?50%;
????-moz-perspective-origin:50%?50%;
????-ms-perspective-origin:50%?50%;
????-o-perspective-origin:50%?50%;
????perspective-origin:50%?50%;
????overflow:hidden;}
#pagegroup{
????width:400px;
????height:400px;
????margin:0?auto;
????position:relative;
????-webkit-transform-style:preserve-3d;
????-moz-transform-style:preserve-3d;????
????-ms-transform-style:preserve-3d;
????-o-transform-style:preserve-3d;
????transform-style:preserve-3d;
????}
.page{
????width:360px;
????height:360px;
????padding:20px;
????background-color:#000;
????color:#FFF;
????font-weight:bold;
????font-size:360px;
????line-height:360px;
????text-align:center;
????position:absolute;
????}
#page1{
????-webkit-transform-origin:bottom;
????-moz-transform-origin:bottom;
????-ms-transform-origin:bottom;
????-o-transform-origin:bottom;
????transform-origin:bottom;
????-webkit-transition:-webkit-transform?1s?linear;
????-moz-transition:-moz-transform?1s?linear;
????-ms-transition:-ms-transform?1s?linear;
????-o-transition:-o-transform?1s?linear;
????transition:transform?1s?linear;
????}
#page2,#page3,#page4,#page5,#page6{
????-webkit-transform-origin:bottom;
????-moz-transform-origin:bottom;
????-ms-transform-origin:bottom;
????-o-transform-origin:bottom;
????transform-origin:bottom;
????-webkit-transition:-webkit-transform?1s?linear;
????-moz-transition:-moz-transform?1s?linear;
????-ms-transition:-ms-transform?1s?linear;
????-o-transition:-o-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:rotateX(90deg);
????-moz-transform:rotateX(90deg);
????-ms-transform:rotateX(90deg);
????-o-transform:rotateX(90deg);
????transform:rotateX(90deg);????}
#op{
????text-align:center;
????margin:40px?auto;}
</style>
<script?type="text/javascript">
???var?curIndex=1;
???function?next(){
???????if(curIndex==6){
????????return;}
???????var?curPage=document.getElementById("page"+curIndex);
???????curPage.style.webkitTransform="rotateX(-90deg)";???
	???curPage.style.mozwebkitTransform="rotateX(-90deg)";
???????curPage.style.mswebkitTransform="rotateX(-90deg)";
???????curPage.style.owebkitTransform="rotateX(-90deg)";
???????curPage.style.Transform="rotateX(-90deg)";	???
???????curIndex?++;
???????var?nextPage=document.getElementById("page"+curIndex);
???????nextPage.style.webkitTransform="rotateX(0deg)";
	???nextPage.style.mozwebkitTransform="rotateX(0deg)";
???????nextPage.style.mswebkitTransform="rotateX(0deg)";
???????nextPage.style.owebkitTransform="rotateX(0deg)";
???????nextPage.style.Transform="rotateX(0deg)";	???
??????}
??function?prev(){????
???????if(curIndex==1){
????????return;}
???????var?curPage=document.getElementById("page"+curIndex);	???
???????curPage.style.webkitTransform="rotateX(90deg)";??
	???curPage.style.mozwebkitTransform="rotateX(90deg)";
???????curPage.style.mswebkitTransform="rotateX(90deg)";
???????curPage.style.owebkitTransform="rotateX(90deg)";
???????curPage.style.Transform="rotateX(90deg)";	???
???????curIndex--;
???????var?nextPage=document.getElementById("page"+curIndex);
???????nextPage.style.webkitTransform="rotateX(0deg)";?
	???nextPage.style.mozwebkitTransform="rotateX(0deg)";
???????nextPage.style.mswebkitTransform="rotateX(0deg)";
???????nextPage.style.owebkitTransform="rotateX(0deg)";
???????nextPage.style.Transform="rotateX(0deg)";	??	???
??????}
</script>

</head>

<body>
<div?id="my3dspace">
??<div?id="pagegroup">
?????<div?class="page"?id="page1">1</div>
?????<div?class="page"?id="page2">2</div>
?????<div?class="page"?id="page3">3</div>
?????<div?class="page"?id="page4">4</div>
?????<div?class="page"?id="page5">5</div>
?????<div?class="page"?id="page6">6</div>?
??</div>
</div>
<div?id="op">
?&nbsp;<a?href="javascript:prev()">previous</a>&nbsp;<a?href="javascript:next()">next</a>
?</div>
</body>
</html>


0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

為什么按老師說的沒什么效果呢，望大神指點

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號