I'm experimenting with CSS perspective to flip cards with a 3D effect, however when the right-most cards flip they are incorrectly overlapping. I have attempted to use Z-Index (which I am aware requires a positioning of anything but "static") however this has had no effect. Any help would be greatful. The project is in the following CodePen:
https://codepen.io/mikrayall/pen/WNzBxEw
HTML:
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Once there was a dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>STORY</h2></div>
<div class="cardBack"><p>A dog and a frog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents3">
<div class="cardFront"><h2>ABOUT</h2></div>
<div class="cardBack"><p>The frog sat on the dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Like the dog was a log...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>DOG</h2></div>
<div class="cardBack"><p>The dog ate the frog...!</p></div>
</div>
</div>
CSS:
*, *::before, *::after{
margin: 0;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items: center;
font-family: 'calibri';
perspective:700px;
background-image: linear-gradient(180deg, #000, #666)
}
.card{
margin: auto 10px;
width:6em;
border: 1px solid white;
border-radius:0.3em;
perspective: 700px;
transform: rotateX(45deg);
transform-style: preserve-3d;
transform-origin:bottom;
}
#cardContents{
position: relative;
width: 6em;
height: 8em;
border-radius:0.3em;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
transform-origin:bottom;
}
.cardFront, .cardBack{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0.3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display:grid;
align-content: center;
}
.cardFront{
background-color: pink;
border:0.2em solid white;
}
.cardBack{
transform: rotateY(180deg);
background: lightblue;
border:0.2em solid white;
}
.card:hover #cardContents{
transform: rotateX(-37deg) translateZ(100px) rotateY(180deg) translateY(-40px);
}
I've attempted to apply Z-Index to the various elements (.cardBack, .cardFront, .cardContents).
Any help gatefully appreciated. Thank you.
add z-index to the hovered card only
.card:hover {
z-index:1;
}
Full code
*, *::before, *::after{
margin: 0;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items: center;
font-family: 'calibri';
perspective:700px;
background-image: linear-gradient(180deg, #000, #666)
}
.card{
margin: auto 10px;
width:6em;
border: 1px solid white;
border-radius:0.3em;
perspective: 700px;
transform: rotateX(45deg);
transform-style: preserve-3d;
transform-origin:bottom;
}
#cardContents{
position: relative;
width: 6em;
height: 8em;
border-radius:0.3em;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
transform-origin:bottom;
}
.cardFront, .cardBack{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0.3em;
backface-visibility: hidden;
transform-style: preserve-3d;
display:grid;
align-content: center;
}
.cardFront{
background-color: pink;
border:0.2em solid white;
}
.cardBack{
transform: rotateY(180deg);
background: lightblue;
border:0.2em solid white;
}
.card:hover {
z-index:1;
}
.card:hover #cardContents{
transform: rotateX(-37deg) translateZ(100px) rotateY(180deg) translateY(-40px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Once there was a dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>STORY</h2></div>
<div class="cardBack"><p>A dog and a frog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents3">
<div class="cardFront"><h2>ABOUT</h2></div>
<div class="cardBack"><p>The frog sat on the dog...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents2">
<div class="cardFront"><h2>A</h2></div>
<div class="cardBack"><p>Like the dog was a log...</p></div>
</div>
</div>
<div class="card">
<div id="cardContents" class="cardContents1">
<div class="cardFront"><h2>DOG</h2></div>
<div class="cardBack"><p>The dog ate the frog...!</p></div>
</div>
</div>
</body>
</html>
Related
Pls I would need help to avoid having a blur effect on my child element "text-block" when the mouse is hovering the card element. The card element should completely have a blur effect when hovering with the mouse & display the text block over it.
I tried a lot of options that don't work throught the proposed solutions by the community. Thks a lot.
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="container my-2">
<img src="./images/mnemba_view.JPG" class="w-100 w-sm-120 preview"/>
<div class="text-block">Click to read more</div>
</div> `
.card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.preview {
position: relative;
}
.text-block {
position: absolute;
opacity: 0;
z-index: 1;
bottom: 0;
top: 50%;
left: 50%;
block-size: 50px;
inline-size: 200px;
padding: 10px 10px;
background-color: rgb(189, 113, 20);
color: white;
border-radius: 10px;
}
.card:hover .text-block{
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.card:not(hover) .text-block {
transition: 0.4s;
}
.card:hover {
filter: blur(2px);
cursor: pointer;
}
I eventually found the solution.
Here's the solution:
.text-block {
position: absolute;
opacity: 0;
bottom: 0;
top: 50%;
left: 50%;
block-size: 50px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
inline-size: 200px;
background-color: rgb(189, 113, 20);
color: white;
border-radius: 10px;
pointer-events: none;
text-align: center;
}
<div class="album py-5">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<div class="card-header fw-bold" style="background-color:#b76800a9">Africa</div>
<div class="preview">
<img src="./images/mnemba_view.JPG" alt="Ile de Mnemba" class="w-100 h-sm-200 w-sm-120 align-item-center justify-content-center"/>
<button class="text-block">Click to read more</button>
</div>
I don't know why CSS image sprite is not working as a separate CSS file but it's working an inline code!
What's the problem?
I've recorded/attached a video as well.
Video => https://gofile.io/?c=ITICxx
It's very strange to me and till now I couldn't find a solution.
I have this problem in all browser (Chrome, Opera, Firefox)
.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sprite-bg{
background: url("https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1{
width:62px;
height:62px;
background-position: 0px 61px;
}
.bg-2{
width: 64px;
height: 62px;
background-position: 62px 61px;
}
.bg-3{
width: 64px;
height: 62px;
background-position: 127px;
}
.dfeature-box .icon i {
font-size: 50px;
background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
background: linear-gradient(to bottom, #45b35e, #6ad56a);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hustbee</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-2"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-3"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
</body>
</html>
My Dear Friend its working, please create a new example and then run this code. i am using an external css file to run this code and it works perfectly.
or
Try to call the image with Relative Path.
.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sprite-bg {
background: url("https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1 {
width: 62px;
height: 62px;
background-position: 0px 61px;
}
.bg-2 {
width: 64px;
height: 62px;
background-position: 62px 61px;
}
.bg-3 {
width: 64px;
height: 62px;
background-position: 127px;
}
.dfeature-box .icon i {
font-size: 50px;
background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
background: linear-gradient(to bottom, #45b35e, #6ad56a);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hustbee</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="dfeature-box">
<div class="icon">
<div class="sprite-bg bg-1"></div>
</div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon">
<div class="sprite-bg bg-2"></div>
</div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon">
<div class="sprite-bg bg-3"></div>
</div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
</body>
</html>
I have a set of three "cards" (but not using the bootstrap card class) that I need to align horizontally and center on the page. I am setting the outer div to a full width, and trying to give each of the three .info-card classes equal .col-lg-4 width. This is still keeping the cards floated left(removing the left float from the .flip-card class aligns the cards vertically. How can I get the columns applied correctly here?
<div class="container">
<div class="flip-cards col-lg-12">
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
<div class="info-card col-lg-4">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
</div>
CSS
.container{
background-color: #eee;
}
.flip-cards .info-card {
float: left;
margin: 2% 1% 0% 1%;
padding: 5% 0% 5% 0%;
position: relative;
-webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
-webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
-webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
background-color: #fff;
overflow: hidden;
width: 200px;
height: 170px;
position: absolute;
opacity: .5;
}
.flip-cards .info-card .front h3 {
text-decoration: underline;
padding: 10px;
text-align: left;
color: #6633cc;
}
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
-webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
color: #fff;
padding: 7px 0px 0px 10px;
font-size: 10px;
}
.flip-cards .info-card .back h6 {
font-weight: 400;
color: #fff;
position: absolute;
text-align: left;
padding: 0px 10px 10px 10px;
bottom: 0;
}
.flip-cards .info-card .back h6 a {
color: #fff;
text-decoration: underline;
}
#media (max-width: 400) {
.flip-cards {
margin-left: -3%;
}
.card-outer-wrapper {
height: 260px;
margin-bottom: 40px;
max-width: 100vw;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.card-outer-wrapper .card-wrapper {
overflow-x: scroll;
width: 200%;
}
}
JSFIDDLE: https://jsfiddle.net/sxLodk6r/
Let's redo it again.
This time I'll list all code which need to be fixed, and at last I'll paste all final html and css code for your convenient.
Add grid below <div class="row"> in bootstrap.
<div class="container">
<div class="row"> <!-- Add This -->
<div class="flip-cards col-lg-12 ">
...
</div>
</div> <!-- Add This -->
</div>
Don't add any class which contain padding and margin with grid class in the same level.
<div class="col-lg-4">
<div class="info-card "> <!-- Separate this class -->
...
</div>
</div>
It would be better to avoid percent value in margin/padding top/bottom and it is easier for you to define the position of .back later in list 7.
.flip-cards .info-card {
margin: 20px 10px 0 10px;
padding: 10px 0 10px 0;
}
If you want to align .info-card center, replace float:left with display:inline-block in .info-card and add .text-center with .col-lg-4
.flip-cards .info-card {
display: inline-block;
float: left; /* Remove This! */
}
<div class="col-lg-4 text-center">
<div class="info-card ">
...
</div>
</div>
Don't use overflow:hidden in .front, instead, remove the margin-top in h3.
.flip-cards .info-card .front { {
overflow: hidden; /* Remove This */
}
.flip-cards .info-card .front h3 {
margin-top: 0px;
}
</div>
Remove positon:absolute in .front.
.flip-cards .info-card .front {
position: absolute; /* Remove This! */
}
Add position:absolute and top:10px in .back.
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
position: absolute;
top:10px;
-webkit-transform: rotateY(-180deg);
}
My Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="flip-cards col-lg-12 ">
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="info-card ">
<div class="front">
<h3>Header</h3>
</div>
<div class="back">
<p>Title</p>
<h6>lorem ipsum</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My Css code
.container{
background-color: #eee;
}
.flip-cards .info-card {
display: inline-block;
margin: 20px 10px 0 10px;
padding: 10px 0 10px 0;
position: relative;
-webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
-webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
-webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
transition: -webkit-transform 1s;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
background-color: #fff;
width: 200px;
height: 170px;
opacity: .5;
}
.flip-cards .info-card .front h3 {
text-decoration: underline;
padding: 10px;
text-align: left;
color: #6633cc;
margin-top: 0px;
}
.flip-cards .info-card .back {
background-color: #6633cc;
width: 200px;
height: 170px;
position: absolute;
top:10px;
-webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
color: #fff;
padding: 7px 0px 0px 10px;
font-size: 10px;
}
.flip-cards .info-card .back h6 {
font-weight: 400;
color: #fff;
position: absolute;
text-align: left;
padding: 0px 10px 10px 10px;
bottom: 0;
}
.flip-cards .info-card .back h6 a {
color: #fff;
text-decoration: underline;
}
#media (max-width: 400) {
.flip-cards {
margin-left: -3%;
}
.card-outer-wrapper {
height: 260px;
margin-bottom: 40px;
max-width: 100vw;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.card-outer-wrapper .card-wrapper {
overflow-x: scroll;
width: 200%;
}
}
I would like 3 responsive columns in a section where the ".service-icon" are centered in each column. I have an image for the background of the column (dirtcolumn.png but this can be replaced by a full height div... all i want is it to be centered inside the div/column). You can see where the problem occurs on my first website in the first section under the cover ----> MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/
HTML: (after arranging every markup i could possibly think of which included giving all divs classes col-md-4 col-xs-4 ETC. ETC.)
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
}
.columndirt {
float: none;
margin: 0 auto;
background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;
background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center center;
text-align: center center;
vertical-align: middle;
position: absolute;
}
.service-icon {
float: none;
margin: 0 auto;
margin: 158px;
margin-top: 180px;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
}
Div or section's height always depends on the contents height. But if you want to give it a height, you can use min-height or you can use contents padding. Change the padding and give the height you want.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BEGIN LINK --><img src="http://files.namecheap.com/graphics/linkus/200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"><!-- END LINK -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
padding-top: 100px;
//height: 500px;
}
.columndirt {
border: 1px solid #fff;
background: #fff;
}
.service-icon {
float: none;
/* margin: 0 auto;
margin: 158px;
margin-top: 180px;*/
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
margin: 100px 0;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.box{
height: 30px;
width: 30px;
background: green;
margin: 25px 0 0 70px;
}
Below, you can see two same figures (rhombus). All content in 2nd and 4th blocks is distorted. It happens because of one of the following reasons:
If .outer div has overflow: hidden;
If .content div has transform: rotateY(0deg) or backface-visibility: hidden; (in Chrome)
If .content3d div has transform-style: preserve-3d; (in Firefox)
How to fix it without removing the css properties that are mentioned above?
body {
font-family: Arial;
}
div {
width: 100%;
height: 100%;
}
img {
height: 100%;
margin: -20%;
}
.outer {
float: left;
width: 200px;
height: 200px;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px solid #000;
margin: 50px;
}
.inner {
line-height: 200px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
font-size: 40px;
font-weight: bold;
text-align: center;
color: #000;
}
.content3d {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.content {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<div class="outer">
<div class="inner">
<img src="https://pixabay.com/static/uploads/photo/2015/12/25/13/07/plant-1107586_960_720.jpg">
</div>
</div>
<div class="outer">
<div class="inner">
<div class="content3d">
<div class="content">
<img src="https://pixabay.com/static/uploads/photo/2015/12/25/13/07/plant-1107586_960_720.jpg">
</div>
</div>
</div>
</div>
<div class="outer" style="clear: both;">
<div class="inner">
TEXT
</div>
</div>
<div class="outer">
<div class="inner">
<div class="content3d">
<div class="content">
TEXT
</div>
</div>
</div>
</div>
It looks like your transforms are causing the issue:
.content {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
It doesn't look like they are doing anything, why do you have them in there?