Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Konrad Pilch
2,435 PointsSafari is weird
Im trying this code
<!-- Work -->
<div class="object work" id="work">
<div class="container">
<div class="row">
<div class="titleHeader">
<h1>Websites Work</h1>
</div><!-- /workHeader -->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work1 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="back">
<div class="work1 workG"><h1>Charity Website - Static</h1></div>
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work2 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="dback">
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work5 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="back">
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work6 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="back">
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work3 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="back">
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
<div class="col-sm-6 col-md-4">
<div class="workWrapper">
<div class="card-container">
<div class="card">
<div class="front">
<div class="work4 workG"><h1>Nothing there</h1></div>
<h5>Nothing here</h5>
</div>
<div class="back">
</div>
</div><!-- card -->
</div><!-- card-container -->
</div><!-- /workWrapper -->
</div><!-- /col-sm-4-->
</div><!-- /row -->
</div><!-- /contaienr -->
</div><!-- /work -->
<!-- About -->
<div class="object about" id="about">
<div class="aboutCover">
<div class="container">
<div class="row">
<div class="titleHeader">
<h1>About Me</h1>
</div><!-- /aboutHeader -->
<div class="col-sm-12 col-md-5">
<div class="profilePic"></div>
</div><!-- /col-md-5 -->
<div class="col-sm-12 col-md-7">
<h3>This is what i love to to!</h3>
<p>I love web developing, i have a high passion for code. Thats right! I love to design too, layouts, pictures and add some interaction to the website. Im techincaly proficient, i dont stop till its perfect. So what are you waiting for?
</p>
</div><!-- /col-md-5 -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /aboutCover -->
/* Card */
.card-container{
perspective: 700;
}
.card{
position:relative;
color:white;
text-align:center;
line-height:200px;
height:200px;
transition:all 0.6s ease;
transform-style: preserve-3d;
}
.front, .back{
position:absolute;
top:0;
left:0;
width:100%;
height:200px;
backface-visibility:hidden;
}
.back{
transform: rotateY(180deg);
background: grey;
}
.card:hover{
transform: rotateY(180deg);
}
And in safari the first card is on front but it dont turn . The rest five are in grey(back ). In chrome it works all correct , why? how can i make this work on safari too?
1 Answer
Lin Lu
29,171 PointsIn the CSS, vender prefix -webkit- needs to be added to some properties in order to support Safari browser, e.g. transform, perspective and backface-visibility. Check out http://caniuse.com to see which properties need to be prefixed.