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

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

設(shè)置3d效果時，并沒有side_back在上，而是side_front在上面先顯示，為什么

為什么我的加了翻轉(zhuǎn)之后，沒有side_back在上面，而是side_front在上面

源代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>圖片畫廊</title>

<style>

*{padding:0;margin:0;}

body{background:#fff;color:#555;font-family:'Avenir Next','微軟雅黑';font-size:14px;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}

.wrap{width:100%;height:600px;position:absolute;top:50%;margin-top:-300px;background:#333;overflow:hidden;}


/*海報樣式*/

.photo{width:260px;height:320px;position:absolute;z-index: 1;box-shadow:0 0 1px rgba(0,0,0,0.01);-webkit-perspective:800px;perspective:800px;}

.photo .side{width:100%;height:100%;background:#eee;position:absolute;top:0;right:0;padding:20px;box-sizing:border-box;}

.photo .side_front .image{width:100%;height:250px;line-height:250px;overflow:hidden;}

.photo .side_front .image img{width:100%;}

.photo .caption{text-align:center;font-size:16px;line-height:50px;}


?

.desc{color:#666;font-size:14px;line-height:1.5em;}


/*當前選中的海報樣式*/

.photo_center{left:50%;top:50%;width:260px;height:320px;margin:-160px 0 0 -130px;z-index:999;}


/*負責翻轉(zhuǎn)*/

.photo_wrap{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;}

.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}

.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}


</style>

</head>

<body>

<div>

? <!-- photo 負責平移和旋轉(zhuǎn) -->

<div class="photo photo_center">

<!-- photo_wrap負責翻轉(zhuǎn) -->

<div>

<div class="side side_front">

<p><img src="images/pic1.jpg" alt=""></p>

<p>標題標題標題</p>

</div>

<div class="side side_back">

<p>描述信息</p>

</div>

</div>

</div>

</div>

</body>

</html>


正在回答

4 回答

.photo?.side-back{
????-webkit-transform:?rotateY(180deg);
????-moz-transform:?rotateY(180deg);
????-ms-transform:?rotateY(180deg);
????-o-transform:?rotateY(180deg);
????transform:?rotateY(180deg);
}
.photo?.side-front{
????-webkit-transform:?rotateY(0deg);
????-moz-transform:?rotateY(0deg);
????-ms-transform:?rotateY(0deg);
????-o-transform:?rotateY(0deg);
????transform:?rotateY(0deg);
}

一個0deg 面對屏幕 一個180deg背對屏幕。當然是0deg在上面啊，面對我們，所以我們才能看見了。背對我們的也設(shè)置了3d效果，只是背對我們看 不見而已。自己多看看基礎(chǔ)了！?。?br />

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

那個應(yīng)該無所謂，我沒有改過來，但是后面完成的樣式是沒問題的，下面是中間版本，給你個參考：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>圖片畫廊</title>

<style>

*{padding:0;margin:0;}

body{background:#fff;color:#555;font-family:'Avenir Next','微軟雅黑';font-size:14px;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}

.wrap{width:100%;height:600px;position:absolute;top:50%;margin-top:-300px;background:#333;overflow:hidden;-webkit-perspective:800px;}

/*海報樣式*/

.photo{width:260px;height:320px;position:absolute;z-index: 1;box-shadow:0 0 1px rgba(0,0,0,0.01);}

.photo .side{width:100%;height:100%;background:#eee;position:absolute;top:0;right:0;padding:20px;box-sizing:border-box;-webkit-backface-visibility:hidden;}

.photo .side_front .image{width:100%;height:250px;line-height:250px;overflow:hidden;}

.photo .side_front .image img{width:100%;}

.photo .caption{text-align:center;font-size:16px;line-height:50px;}

.desc{color:#666;font-size:14px;line-height:1.5em;}

/*當前選中的海報樣式*/

.photo_center{left:50%;top:50%;width:260px;height:320px;margin:-160px 0 0 -130px;z-index:999;}

/*負責翻轉(zhuǎn)*/

.photo_wrap{position:absolute;width:100%;height:100%;-webkit-transform-style:preserve-3d;-webkit-transition:all .6s;}

.photo_wrap .side_front{-webkit-transform:rotateY(0deg);}

.photo_wrap .side_back{-webkit-transform:rotateY(180deg);}

.photo_front .photo_wrap{-webkit-transform:rotateY(0deg);}

.photo_back .photo_wrap{-webkit-transform:rotateY(180deg);}

</style>

</style>

</head>

<body onselectstart="return false">

? <!--2. 改寫視圖,為模板字符串 -->

<div id="wrap">

? <!-- photo 負責平移和旋轉(zhuǎn) -->

<div class="photo photo_front" onclick="turn(this)" id="photo_{{index}}">

<!-- photo_wrap負責翻轉(zhuǎn) -->

<div>

<div class="side side_front">

<p><img src="images/{{img}}" alt=""></p>

<p>{{caption}}</p>

</div>

<div class="side side_back">

<p>{{desc}}</p>

</div>

</div>

</div>

</div>

<script src="images/data.js"></script>

<script>

//1.翻面控制

function turn(elem){

var cls = elem.className;

if(/photo_front/.test(cls)){

cls = cls.replace(/photo_front/,'photo_back');

}else{

cls = cls.replace(/photo_back/,'photo_front');

}

return elem.className = cls;

}

//3.通用函數(shù)

function g(selector){

var method = selector.substr(0,1) == '.' ? 'getElementsByClassName' : 'getElementById';

return document[method](selector.substr(1));

}

//4.輸出所有海報

var data = data;

function addPhotos(){

var template = g('#wrap').innerHTML;

var html = [];

for(s in data){

var _html = template

.replace('{{index}}',s)

.replace('{{img}}',data[s].img)

.replace('{{caption}}',data[s].caption)

.replace('{{desc}}',data[s].desc);

html.push(_html);

}

g('#wrap').innerHTML = html.join(' ');


rsort(random([0,data.length]));

}

addPhotos();

//5.排序海報

function rsort(n){

var _photo = g('.photo');

var photos = [];

for(s=0;s<_photo.length;s++){?

_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,' ');

photos.push( _photo[s] );

}

var photo_center = g('#photo_'+ n);

photo_center.className += ' photo_center ';

photo_center = photos.splice(n,1)[0];

//把海報分為左右區(qū)域兩個部分

var photos_left = photos.splice(0,Math.ceil(photos.length/2));

var photos_right = photos;


var ranges = range();


for(s in photos_left){

var photo = photos_left[s];


photo.style.left = random(ranges.left.x) + 'px';

photo.style.top = random(ranges.left.y) + 'px';


photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+ 'deg)';

}


for(s in photos_right){

var photo = photos_right[s];


photo.style.left = random(ranges.right.x) + 'px';

photo.style.top = random(ranges.right.y) + 'px';


photo.style['-webkit-transform'] = 'rotate('+random([-150,150])+ 'deg)';

}


console.log(photos_left.length,photos_right.length);

}


//6.計算左右分區(qū)的范圍{left:{x:[min,max],y[min,max]}}

function range(){

var range = { left:{ x:[], y:[] }, right:{ x:[], y:[] }};


var wrap = {

w:g('#wrap').clientWidth,

h:g('#wrap').clientHeight

}

var photo = {

w:g('.photo')[0].clientWidth,

h:g('.photo')[0].clientHeight

}

range.wrap = wrap;

range.photo = photo;

range.left.x = [0 - photo.w, wrap.w/2 - photo.w/2];

range.left.y = [0 - photo.h, wrap.h];


range.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w];

range.right.y = range.left.y;


return range;

}

//隨機生成一個值(0~20),支持取值范圍random[min,max]

function random(range){

var max = Math.max(range[0],range[1]);

var min = Math.min(range[0],range[1]);

var diff = max - min;//差值

var number = Math.ceil(Math.random() * diff + min);

return number;

}

</script>

</body>

</html>


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

我也出現(xiàn)了同樣的問題，也是跟著老師打的，檢查了好幾遍代碼，和老師的一樣，請問你的問題解決了嗎？可以分享一下答案嗎？


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

你確定你加上了嗎？你的photo_wrap這個class都沒加上，也沒有在外面套一層div.photo_wrap

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

行走的指尖 提問者

嗯，是加了的，可是不知道為什么復(fù)制過來就沒了。不過謝謝你，繼續(xù)找問題中
2016-08-16 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

設(shè)置3d效果時，并沒有side_back在上，而是side_front在上面先顯示，為什么

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

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

 幫助反饋 APP下載

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

 公眾號

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