I have a problem with a website. I use CSS3 and Transform to rotate the DIV. No problems on all browsers except Iphone and only on the FAQ page, the DIV will not turn!
http://www.bagolf.com/faq
Do you know why I searched for hours, and I do not understand.
<div class="block1_faq_container">
<div class="block1_faq_card">
<div class="front blue">
<h4 class="title">How many clubs may I put in a Bagolf bag?</h4>
</div>
<div class="back face center blue">
<span class="title-148-1-2">There are 15 dividers for 14 clubs and 1 umbrella. Each club has its own divider!</span>
</div>
</div>
</div>
And CSS code :
.block1_faq_container{margin: 10px 0 0; width: 306px; height: 148px; text- align:center;float:left;}
.block1_faq_card,
.block1_faq_card > div{width: inherit;height: inherit;transition: transform 1s; -webkit-transition: all 1s ease-in-out;}
.block1_faq_card > div{line-height: 148px;position: absolute;backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.block1_faq_container:hover .front{transform: perspective(600px) rotateY(180deg); -webkit-transform: perspective(600px) rotateY(180deg);}
.block1_faq_container:hover .back{transform: perspective(600px) rotateY(360deg); -webkit-transform: perspective(600px) rotateY(360deg);}
.title {font-size: 1.9em !important;font-weight: lighter;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block; padding:10px; }
.title-148-1-2 {font-size: 1.4em !important;font-weight: normal;color:#fff; vertical-align:middle;line-height:1.2em;display:inline-block;padding:10px;}
.front.blue{background-color:#00a0e9;transform: perspective(600px) rotateY(0deg); -webkit-transform: perspective(600px) rotateY(0deg);line-height:148px;}
Thank you very much :)
Related
I'm making a simple javascript game. At the moment, I'm facing a problem in the form of cross-browser compatibility with Safari. I have cards that flip on click through transform: rotateY() by 180deg, they also have a transition. And as far as I understand the problem is with him. Because if you remove it and leave the same flip logic, then this bug does not exist. If possible, please tell me how to solve it. You can go directly to the site itself -> https://oltensia.ru/
bug
Here is the whole code:
HTML:
<div class="game__square relative">
<div class="game__square-side game__square-back">
<div class="w-h-full relative">
<div class="square-back square-side stage-1"></div>
<div class="square-back square-side stage-2"></div>
<div class="square-back square-side stage-3"></div>
<div class="square-back square-side stage-4"></div>
<div class="square-back square-side stage-5"></div>
<div class="square-back square-side stage-6"></div>
</div>
<div class="w-h-full absolute flex-centered left-top-0">
<span class="question-mark">?</span>
</div>
</div>
<div class="game__square-side game__square-front">
<div class="w-h-full relative">
<div class="square-front square-side stage-1"></div>
<div class="square-front square-side stage-2"></div>
<div class="square-front square-side stage-3"></div>
<div class="square-front square-side stage-4"></div>
<div class="square-front square-side stage-5"></div>
<div class="square-front square-side stage-6"></div>
</div>
<div class="w-h-full absolute flex-centered left-top-0">
<img class="game__square-img" src="./storage/img/main/game-field/square-front/chest.png">
</div>
</div>
</div>
Sass
.game__square
border: none
outline: none
background: none
cursor: pointer
&-side
#include w-h-full()
#include left-top-0()
position: absolute
backface-visibility: hidden
-webkit-transition: all 200ms linear
-moz-transition: all 200ms linear
-o-transition: all 200ms linear
.square-side
position: absolute
#include left-top-0()
#include w-h-full()
&-back
transform: rotateY(0deg)
-ms-transform: rotateY(0deg)
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
.question-mark
font-family: $ff-question-mark
&-front
transform: rotateY(180deg)
-ms-transform: rotateY(180deg)
-webkit-transform: rotateY(180deg)
-moz-transform: rotateY(180deg)
-o-transform: rotateY(180deg)
&.checked
.game__square-back
transform: rotateY(-180deg)
-ms-transform: rotateY(-180deg)
-webkit-transform: rotateY(-180deg)
-moz-transform: rotateY(-180deg)
-o-transform: rotateY(-180deg)
.game__square-front
transform: rotateY(-180deg)
-ms-transform: rotateY(0deg)
-webkit-transform: rotateY(0deg)
-moz-transform: rotateY(0deg)
-o-transform: rotateY(0deg)
Please, help me if it posible. I'll be very grateful
I tried to fix it by adding cross-browser ones, but I don't know which ones to add
When I rotate an image using rotate(90) the top of the image is cut off, even if the container has overflow: auto.
#container {
width: 100%;
overflow: auto;
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<div id="container">
<img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>
Example: https://jsfiddle.net/dh0o6vz3/3/
Is there a way to alter the container's css so that it overflows above the image as well as below?
You need to use overflow:visible instead and you may also change the transform-origin depending on how you want to show the image
#container {
width: 100%;
overflow: visible;
border: 1px solid;
}
.rotate90 {
transform: rotate(90deg);
transform-origin: bottom;
}
<div id="container">
<img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>
So I ended up having to force a translation, which I guess makes sense.
.rotate90 {
-webkit-transform: rotate(90deg) translate(25%);
-moz-transform: rotate(90deg) translate(25%);
-o-transform: rotate(90deg) translate(25%);
-ms-transform: rotate(90deg) translate(25%);
transform: rotate(90deg) translate(25%);
}
This doesn't work in all cases, as the width of the image determines what % translate I need.
But it works well enough for the use cases I have,
In our application we use a temporary css transform as a page transition.
With the latest build of google chrome (37) this stopped working. The transformation has no longer a perspective.
Fiddling with the developer tools I was able to restore the correct behavior by changing the definition of the perspective on the parent element from
perspective: 2000px;
to
transform: perspective(2000px);
My question is: is something wrong with our existing declaration (using the perspectice property) or is this a bug in google chrome?
I tried to recreate the problem below, but in the reduced example I see the reverse effect, that now perspective works and transform:perspective not.
Any thoughts?
.perspective-Parent {
/*-moz-transform: perspective(2000px);
-ms-transform: perspective(2000px);
-o-transform: perspective(2000px);
-webkit-transform: perspective(2000px);
transform: perspective(2000px);*/
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-webkit-perspective: 2000px;
perspective: 2000px;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: rotateY(75deg);
-moz-transform: rotateY(75deg);
-o-transform: rotateY(75deg);
-webkit-transform: rotateY(75deg);
transform: rotateY(75deg);
width: 200px;
height: 100px;
}
<p>
<div class="perspective-Parent">
<div class="page">
</div>
</div>
My basic understanding of perspective vs transform perspective is simply that the plain perspective attribute is what you usually use on a parent element to give multiple children the same perspective, while transform perspective would be used on a child element or an individual element to give it its own perspective.
This is most easily seen when you are applying these effects to more than one element:
perspective: ; on a parent element:
.perspective-Parent {
-moz-perspective: 2000px;
-ms-perspective: 2000px;
-webkit-perspective: 2000px;
perspective: 2000px;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: rotateY(75deg);
-moz-transform: rotateY(75deg);
-o-transform: rotateY(75deg);
-webkit-transform: rotateY(75deg);
transform: rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px; /* added to make difference more visible */
}
<div class="perspective-Parent">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
Notice that all three "pages" in the above example are being viewed from a common perspective.
transform: perspective(); on the individual elements:
.page {
background-color: red;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
-webkit-transform-origin: right center;
transform-origin: right center;
-ms-transform: perspective(2000px) rotateY(75deg);
-moz-transform: perspective(2000px) rotateY(75deg);
-o-transform: perspective(2000px) rotateY(75deg);
-webkit-transform: perspective(2000px) rotateY(75deg);
transform: perspective(2000px) rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px; /* added to make difference more visible */
}
<div class="perspective-Parent">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
Notice on this example that the three "pages" each have their own perspective.
Now that that's all out of the way...
Neither approach is incorrect they just offer different visual effects, just pick the one that you prefer.
Accepted answer here is not correct.
You can indeed do a perspective transform on a parent element. For this to work, you need to set transform-style: preserve-3d; on the parent.
.perspective-Parent{
transform: perspective(2000px);
transform-style: preserve-3d;
}
.page {
background-color: red;
transform-origin: right center;
transform: rotateY(75deg);
width: 200px;
height: 100px;
margin: 10px;
}
<div class="perspective-Parent">
<div class="page">
</div>
<div class="page">
</div><div class="page">
</div>
</div>
When I test out different perspectives in chrome, the perspective property gives some strange distortions.
.box{
width: 100px;
height: 100px;
margin-left: 100px;
}
.no-perspective-box{
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
}
.perspective-prop-box{
perspective: 7.5cm;
transform-style: preserve-3d; /*This is required here too*/
transform: rotateX(-15deg) rotateY(15deg);
}
.perspective-box{
transform-style: preserve-3d;
transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
}
.face{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}
.top{
background-color: blue;
transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.left{
background-color: red;
transform: rotateY(-90deg) translate3d(0, 0, 50px);
}
.front{
background-color: green;
transform: translate3d(0, 0, 50px);
}
<p>Without Perspective:</p>
<div class="box no-perspective-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Property:</p>
<div class="box perspective-prop-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />
<p>With Perspective Function:</p>
<div class="box perspective-box">
<div class="face front">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
<br /><br />
The order matters in case of declaring the property and the function, the "perspective" function must come right after the "transform" property!
WRONG CODE
transform:rotateX(45deg) perspective(100px);
CORRECT CODE
transform:perspective(100px) rotate(45deg);
To activate 3D space, an element needs perspective. This can be applied in two ways: using the transform property, with the perspective as a functional notation.
transform: perspective( 600px );
or using the perspective property:
perspective: 600px;
Perspective Projection vs. Perspective Transformation
Perspective Projection calculates the perspective view (i.e., foreshortening) of a 3D object onto a 2D projection plane. The effect
of viewing in perspective is achieved, and, of course, the z-values
(depth information) are discarded in the process.
Perspective Transformation allows us to see how the perspectively foreshortened and projected polygons will overlap, without discarding
the z-values (which we need to use later for depth comparison).
Ok, so here's another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA
When you hover over the red square it rotates by 180° on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180° is reached, then it disappears. Remove the perspective property, and you'll see that it works as expected, the backface isn't visible at all, but ofcourse the 3d effect is lost.
It's possible to workaround this problem by applying perspective in the transform property: http://jsfiddle.net/M2pyb But this will cause problems in cojunction with transform-origin-z, when z is set to anything other than 0, the whole thing becomes "scaled": http://jsfiddle.net/s4ndv so unfortunately that's not a solution.
The backface-visibilty thingy is probaly a bug? If so, is there any workaound other than the one i've mentioned?
I came up against this glitch too and it is definitely a glitch.
The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/
.item {
backface-visibility: hidden;
transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
transform: perspective(200px) rotateX(180deg);
}
(See also answer at https://stackoverflow.com/a/14507332/2105930)
I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:
At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.
I struggled for hours. this is the only crossbrowser solution that worked for me: http://www.cssplay.co.uk/menu/css3-3d-card.html
A workaround that i would imagine is adding a transition for opacity that has 0 timing and has a delay of half of your perspective transition.
.container, .item {
width: 200px;
height: 200px;
opacity:1;
}
.container {
perspective: 200px;
}
.container:hover .item {
transform: rotateX(180deg);
opacity:0;
}
.item {
background-color: #ff0000;
backface-visibility: hidden;
transition: transform 3000ms, opacity 0ms 1500ms;
}
I would suggest stop battling IE with the perspective property set on all transformed elements and start testing for support for preserve-3d. I followed this guy to expand Modernizr with a property test: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+
that way, its possible to do a fallback for IE's lacking implementation of 3d transforms, and start playing with the more cutting edge possibilities in the other browsers.
otherwise IE will make your code too messy, and still not give you the same possibilities - like rotating multisided 3d objects.
..just my 2 cents.
I have a nice illogical solution, I tried all the solutions above and none worked. However, an error did. I set the backface-visibility to visible when the card is flipped. works in both IE and Chrome.
It works better in Chrome, IE is ok.
var flipcard = document.getElementsByClassName("flipcard");
var i;
for (i = 0; i < flipcard.length; i++) {
flipcard[i].addEventListener("click", function() {
this.classList.toggle("is-flipped");
});
}
.card_scene {
width: 180px;
height: 234px;
margin: 10px 5px;
perspective: 600px;
float:left;
}
.flipcard {
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.flipcard.is-flipped {
transform: rotateY(180deg);
}
.flipcard.is-flipped .card__face {
backface-visibility: visible;
}
.card__face {
position: absolute;
max-width: 100%;
max-height: 100%;
line-height: 234px;
backface-visibility: hidden;
}
.card__face--front {
transform: rotateY(0deg);
}
.card__face--back {
background: white;
transform: rotateY(-180deg);
border: 1px solid #CCC;
width: 100%;
}
.cardtext {
margin: 6px;
font-size:14px;
line-height: 1.2em;
display: inline-block;
width: 100%;
white-space: pre;
}
.flipcard-breakfloat {
clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start of flipcard tempalte -->
<div class="build-only">
<h2>question text here</h2>
<p>Flip the pictures to...</p>
<div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"><img width="180" height="234" id="yui_3_17_2_1_1534724749880_198" src="https://media.gettyimages.com/photos/world-heritage-listed-rainforest-in-dorrigo-national-park-new-south-picture-id936315116" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback **<br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/lonely-single-tree-in-the-field-picture-id680917092" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/old-tree-picture-id173501312" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
</div>
<div class="flipcard-breakfloat"></div>
</div>
<!-- end of flipcard tempalte -->
<p></p>
<p></p>
I implemented the solution proposed by #torbonaut and #chowey in this jsfiddle
html
<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>
css
#container, .bottom, .top {
width: 200px;
height: 300px;
position: absolute;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.backhide{
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#container:hover .bottom {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
#container:hover .top {
-webkit-transform: perspective(800px) rotateY(-180deg);
-moz-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
.bottom {
background-color: #ff0000;
-moz-transform: perspective(800px) rotateY(180deg);
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.top {
background-color: #e0e0e0;
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.
On an element which I have rotated, an anchor that spans 100% of the width of the element is only accessible on the right 50% of the element.
This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.
Here is the code:
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
Becomes:
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
The addition of the translateZ to the transform makes the left side of the element clickable.
Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
I used this code below
<style>
.outer div {
float: left;
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
}
.outer a {
-webkit-transition: all 1.0s ease-in-out;
background:#0F6;
width:100px;
height:100px;
display:block;
-webkit-transform: rotateY(45deg);
}
.outer div:hover a {
-webkit-transform: none;
}
</style>
<div class="outer">
<div>
</div>
</div>
This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/