CSS transform effect works on all browsers except Safari - html

Question

.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;
}
<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 ›</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 ›</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 ›</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 ›</a></h>
</div>
</div>
<div class="title">
<h4>text</h4>
<h5>text</h5>
</div>
</div>
</div>
</div>

Answer 1

You need the -webkit- prefix to make it work in safari:
-webkit-transform: rotateY(180deg);
See compatibility table:
http://caniuse.com/#search=transform

Answer 2

Try This-
.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;
}