好奇怪啊?為啥我翻轉之后,就直接變成了一塊黑
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<title>Document</title>
? ?<style type="text/css">
? ?*{
? ? ? ?padding: 0;margin: 0;
? ?}
? ?body{
? ? ? ?background-color: #fff;
? ? ? ?color: #555;
? ? ? ?font-family: "微軟雅黑";
? ? ? ?font-size: 14px;
? ? ? ?font-smoothing:amtialiased;
? ?}
? ?.wrap{
? ? ? ?width: 100%;
? ? ? ?height: 600px;
? ? ? ?position: absolute;
? ? ? ?top: 50%;
? ? ? ?margin-top: -300px; /*完成了垂直居中*/
? ? ? ?background-color: #333;
? ? ? ?overflow: hidden;
? ? ? ?perspective: 800px;/*制造出一個3d的效果*/
? ?
? ?}
? ?/*海報樣式*/
? ?.photo{
? ? ? ?width: 260px;
? ? ? ?height: 320px;
? ? ? ?position: absolute;
? ? ? ?z-index: 1;
? ? ? ?box-shadow: 0 0 1px rgba(0,0,0,.01);
? ?}
? ?.photo .side{
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ? ? ?background-color: #eee;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?right: 0;
? ? ? ?padding: 20px; ?
? ? ? ?box-sizing: border-box;
? ?}
? ?.photo .side-front{
? ? ?
? ?}
? ?.photo .side-front .image{
? ? ? ?width: 100%;
? ? ? ?height: 250px;
? ? ? ?line-height: 250px;
? ? ? ?overflow: hidden;
? ?}
? ?.photo .side-front .image img{
? ? ? ?width: 100%;
? ?}
? ?.photo .side-front .caption{
? ? ? ?text-align: center;
? ? ? ?font-size: 16px;
? ? ? ?line-height: 50px;
? ?}
? ?.photo .side-back{
? ?
? ?}
? ?.photo .side-back .desc{
? ? ? ?color: #666;
? ? ? ?font-size: 14px;
? ? ? ?line-height: 1.5em;
? ?}
? ?/*當前選擇的海報樣式*/
? ?.photo_center{
? ? ? left: 50%;
? ? ? top:50%;
? ? ? margin: -160px 0 0 -130px;
? ? ? z-index: 999;
? ? ? /* 設置水平,垂直居中的方法:
? ? ? ?position: absolute;
? ? ? ?left:50%
? ? ? ?top:50%;
? ? ? ?margin-left:-130px; 設置為寬度的一半
? ? ? ?margin-top:-160px; 設置為高度的一半
? ? ? ? */
? ?}
? ?/*負責翻轉*/
? ?.photo-wrap{
? ? ? ?position: absolute;
? ? ? ?width: 100%;
? ? ? ?height: 100%;
? ? ? ?transform-style:preserve-3d;
? ? ? ?transition: all 0.6s;
? ?}
? ?.photo-wrap .side-front{
? ? ? transform: rotateY(0deg);
? ?}
? ?.photo-wrap .side-back{
? ? ? ?transform: rotateY(180deg);
? ?}
? ?.photo-wrap .side{
? ? ? ?backface-visibility: hidden;
? ?}
? ?.photo_front .photo-wrap{
? ? ? ?transform: rotateY(0deg);
? ?}
? ?.photo_back .photo-wrap{
? ? ? transform: rotateY(180deg);
? ?}
? ?</style>
</head>
<body onselectstart="return false;">
? ?<div class="wrap">
? ? ? ? <!-- photo 負責平移,旋轉 -->
? ? ? ?<div class="photo photo_center">
? ? ? ? <!-- photo-wrap 負責翻轉 -->
? ? ? ? ? ?<div class="photo-wrap">
? ? ? ? ? ? ? ? ? ?<div class="side side-front">
? ? ? ? ? ? ? ? ? ? ? ?<p ckass="image"><img src="test.jpeg" style="height: 300px;"/></p>
? ? ? ? ? ? ? ? ? ? ? ?<p class="caption">麥兜我和我媽媽</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<div class="side side-back">
? ? ? ? ? ? ? ? ? ? ? ?<p class="desc">描述信息</p>
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</body>
</html>
2019-01-02
肯定一片黑，
.photo_front .photo-wrap{
? ? ? ?transform: rotateY(0deg);
? ?}
? ?.photo_back .photo-wrap{
? ? ? transform: rotateY(180deg);
? ?}
理解一下
<div class='photo-wrap'>
<div class='div1'>正面</div>
<div class='div2'>反面</div>
</div>
現在是需要把photo-wrap下的div1和div2進行翻轉，簡單理解就是翻過去div1之后把div2展示出來。翻過去div2之后把div1展示出來。
你直接把photo-wrap翻轉過去肯定什么都沒有，就是一片黑。
你把手機放桌子上，翻過去手機是背面，再翻過來是正面。你要是把桌子翻過去還能看到手機嗎？
.photo_front .photo-wrap .div1{//正面在上時 div1的樣式
? ? ? ?transform: rotateY(0deg);
? ?}
.photo_front .photo-wrap .div2{//正面在上時 div2的樣式
? ? ? ?transform: rotateY(180deg);
? ?}
? ?.photo_back .photo-wrap .div1{//反面在上時 div1的樣式
? ? ? transform: rotateY(180deg);
? ?}
? ?.photo_back .photo-wrap .div2{//反面在上時 div2的樣式
? ? ? transform: rotateY(360deg);
? ?}
2018-08-18
圖片的后綴名打錯了吧