CSS转换效果适用于除Safari之外的所有浏览器

时间：2015-11-17 12:24:48

标签： html5 twitter-bootstrap css3 css-transforms

＆＃13;
＆＃13; 
.featured_widgets {
  margin: 4% 0px;
}
.featured_widgets .columns {
  display: table;
  margin-bottom: 20px;
  text-align: center;
}
.featured_widgets .widget_box {
  height: 156px;
  text-align: center;
  margin: 0px 1%;
  vertical-align: middle;
  width: 100%;
  display: table-cell;
  padding: 0px 20px;
}
.featured_widgets .widget_box .front img {
  height: 120px;
}
.featured_widgets .widget_box .front {
  height: 140px;
}
.featured_widgets .widget_box .back {
  height: 140px;
  padding-top: 40px;
  color: #fff;
  font-size: 17px;
}
.featured_widgets .columns .title {
  display: table-row;
}
.featured_widgets .columns .title h5 {
  color: #999;
  padding: 0px 15px;
  font-size: 15px;
}
.flip-container {
  transform: perspective(1000px);
  transform-style: preserve-3d;
}
.flip-container:hover .back,
.flip-container.hover .back {
  transform: rotateY(0deg);
}
.flip-container:hover .front,
.flip-container.hover .front {
  transform: rotateY(180deg);
}
.flipper {
  perspective: 800px;
  perspective-origin: 50% 100px;
  position: relative;
  transform: perspective(1000px);
  transform-style: preserve-3d;
  transition: all 0.6s ease 0s;
}
.front,
.back {
  backface-visibility: hidden;
  position: relative;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: all 1s ease 0.3s;
}
.front {
  z-index: 2;
}
.back {
  margin-top: -180px;
  text-align: center;
  transform: rotateY(-180deg);
}
.vertical.flip-container {
  position: relative;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
  transform-origin: 100% 213.5px 0;
}
.vertical.flip-container:hover .back,
.vertical.flip-container.hover .back {
  transform: rotateX(0deg);
}
.vertical.flip-container:hover .front,
.vertical.flip-container.hover .front {
  transform: rotateX(180deg);
}
.seagreen_bg {
  background: #1cbec9;
}
.inxblue_bg {
  background: #0075ba;
}
.inxorange_bg {
  background: #f37b20;
}
.inxyellow_bg {
  background: #fdb813;
}
.btn_line {
  border: 1px solid #fff;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  margin-top: 10px;
  padding: 8px 15px;
  color: #fff;
}
.btn_line:hover {
  background: #333 none repeat scroll 0 0;
  border: 1px solid #000;
  color: #fff;
  text-decoration: none;
}
＆＃13; 
<div class="container">
  <div class="row featured_widgets">

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 columns flip-container vertical">
      <div class="widget_box flipper seagreen_bg">
        <div class="front">
          <img src="https://cdn.sparkfun.com/assets/9/9/2/5/e/51f9a101757b7f032ab7f724.png" alt="">
        </div>
        <div class="back">
          <h5>text text text text text text.</h5>
          <h5><a class="btn_line" href="#">Learn More &rsaquo;</a></h5>
        </div>
      </div>
      <div class="title">
        <h4>text</h4>
        <h5>text text text text text text.</h5>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 columns flip-container vertical">
      <div class="widget_box flipper inxblue_bg">
        <div class="front">
          <img src="https://cdn.sparkfun.com/assets/9/9/2/5/e/51f9a101757b7f032ab7f724.png" alt="">
        </div>
        <div class="back">
          <h5>text text text text text text.</h5>
          <h5><a class="btn_line" href="#">Learn More &rsaquo;</a></h5>
        </div>
      </div>
      <div class="title">
        <h4>text</h4>
        <h5>text text text text text text.</h5>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 columns flip-container vertical">
      <div class="widget_box flipper inxorange_bg">
        <div class="front">
          <img src="https://cdn.sparkfun.com/assets/9/9/2/5/e/51f9a101757b7f032ab7f724.png" alt="">
        </div>
        <div class="back">
          <h5>text text text text text text.</h5>
          <h5><a class="btn_line" href="#">Learn More &rsaquo;</a></h5>
        </div>
      </div>
      <div class="title">
        <h4>text</h4>
        <h5>text text text text text text</h5>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 columns flip-container vertical">
      <div class="widget_box flipper inxyellow_bg">
        <div class="front">
          <img src="https://cdn.sparkfun.com/assets/9/9/2/5/e/51f9a101757b7f032ab7f724.png" alt="">
        </div>
        <div class="back">
          <h5>text text text text text text.</h5>
          <h5><a class="btn_line" href="">Learn More &rsaquo;</a></h>
            	</div>
            </div>
            <div class="title">
            	<h4>text</h4>
            	<h5>text</h5>
        </div>
      </div>

    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您需要-webkit-前缀才能使其在Safari中运行：

 -webkit-transform: rotateY(180deg);

参见兼容性表：

http://caniuse.com/#search=transform

答案 1 :(得分：0)

试试这个 - 

.featured_widgets {
        margin: 4% 0px;
    }
    .featured_widgets .columns {
        display: table;
        margin-bottom: 20px;
        text-align: center;
    }
    .featured_widgets .widget_box {
        height: 156px;
        text-align: center;
        margin: 0px 1%;
        vertical-align: middle;
        width: 100%;
        display: table-cell;
        padding: 0px 20px;
    }
    .featured_widgets .widget_box .front img {
        height: 120px;
    }
    .featured_widgets .widget_box .front {
        height: 140px;
    }
    .featured_widgets .widget_box .back {
        height: 140px;
        padding-top: 40px;
        color: #fff;
        font-size: 17px;
    }
    .featured_widgets .columns .title {
        display: table-row;
    }
    .featured_widgets .columns .title h5 {
        color: #999;
        padding: 0px 15px;
        font-size: 15px;
    }
    .flip-container {
        transform:perspective(1000px);
        -moz-transform:perspective(1000px);
        -ms-transform:perspective(1000px);
        -o-transform:perspective(1000px);
        -webkit-transform:perspective(1000px);
        transform-style:preserve-3d;
    }
    .flip-container:hover .back ,

    .flip-container.hover .back {
        transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
    }
    .flip-container:hover .front ,

    .flip-container.hover .front {
        transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
    }
    .flipper {
        perspective: 800px;
        perspective-origin: 50% 100px;
        position: relative;
        transform: perspective(1000px);
        -moz-transform: perspective(1000px);
        -ms-transform: perspective(1000px);
        -o-transform: perspective(1000px);
        -webkit-transform: perspective(1000px);
        transform-style: preserve-3d;
        transition: all 0.6s ease 0s;
        -moz-transition: all 0.6s ease 0s;
        -ms-transition: all 0.6s ease 0s;
        -o-transition: all 0.6s ease 0s;
        -webkit-transition: all 0.6s ease 0s;
    }
    .front {
        backface-visibility: hidden;
        position: relative;
        transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform-style: preserve-3d;
        transition: all 1s ease 0.3s;
        -moz-transition: all 1s ease 0.3s;
        -ms-transition: all 1s ease 0.3s;
        -o-transition: all 1s ease 0.3s;
        -webkit-transition: all 1s ease 0.3s;
        z-index: 2;
    }

    .back {
        backface-visibility: hidden;
        position: relative;
        transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        transform-style: preserve-3d;
        transition: all 1s ease 0.3s;
        -moz-transition: all 1s ease 0.3s;
        -ms-transition: all 1s ease 0.3s;
        -o-transition: all 1s ease 0.3s;
        -webkit-transition: all 1s ease 0.3s;
    }
    .back {
        margin-top: -180px;
        text-align: center;
        transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
    }
    .vertical.flip-container {
        position: relative;
    }
    .vertical .back {
        transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
    }
    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px 0;
    }
    .vertical.flip-container:hover .back ,

    .vertical.flip-container.hover .back {
        transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
    }
    .vertical.flip-container:hover .front ,

    .vertical.flip-container.hover .front {
        transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        -webkit-transform: rotateX(180deg);
    }
    .seagreen_bg {
        background: #1cbec9;
    }
    .inxblue_bg {
        background: #0075ba;
    }
    .inxorange_bg {
        background: #f37b20;
    }
    .inxyellow_bg {
        background: #fdb813;
    }
    .btn_line {
        border: 1px solid #fff;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        margin-top: 10px;
        padding: 8px 15px;
        color: #fff;
    }
    .btn_line:hover {
        background: #333 none repeat scroll 0 0;
        border: 1px solid #000;
        color: #fff;
        text-decoration: none;
    }
相关问题
最新问题