Hi Forum,
auf meiner Testseite ist auf der Rückseite von Bildern die ich durch einen 3d-Effekt (transform-style: preserve-3d;) flippen lasse. Um den Effekt zu sehen muss man auf der Startseite einen Moment auf den Bildern verweilen.
Auf der Rückseite dieser Bilder ist Text zu sehen, den ich schon horizontal zentriert habe, aber vertikal will es einfach nicht klappen.
Ich hatte vorher schon mittels
Code
height: 149px;
position: absolute;
top: 50%;
den Text vertikal zentriert, aber da verschiebt sich auch das Hintergrundbild der Rückseite.
Mein Code der home.php sieht folgendermaßen aus:
PHP
<?php query_posts('post_type=projekte&showposts=8'); ?>
<div class="project-wrapper">
<h2>Neueste Projekte</h2>
<ul class="home-box">
<?php while (have_posts()) : the_post(); ?>
<li class="home-thumbnail">
<div class="card-container">
<div class="card">
<div class="back"><p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></div>
<div class="front"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(200, 200), array('class' => 'recent-thumbs')); ?></a></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
<a href="http://dev.npire.de/projekte/" class="allItems alignright">Alle Projekte</a>
<div class="clearfix"></div>
</div>Der zugehörige CSS-Code so:
Code
.card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
width: 199px;
height: 149px;
position: relative;
}
.card .back {
/*height: 149px;
position: absolute;
top: 50%;*/
background-color: #333;
}
.card .back p {
text-align: center;
vertical-align: middle;
}
.card .back p a {
text-decoration: none;
color: #ff3000;
text-transform: uppercase;
}
.card .back a:hover {
color: #00ff84;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
-moz-transition: -moz-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
-ms-transition: -ms-transform 1s ease-in;
transition: transform 1s ease-in;
width: 100%;
height: 100%;
padding: 0px;
color: #fff;
font-weight: bold;
border-radius: 4px;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
.card-container {
display: inline-block;
text-align: justify;
position: relative;
}
.card-container:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}Kann mir jemand Helfen bei der vertikalen Zentrierung des Textes?
Gruß
Karsten