Link to example. Hover over the book on the left side
As you can see, the book seems to open towards the user.
I already have the first part of the animation: JSFiddle
HTML:
<h1>Boek opendoen animatie</h1>
<div class="achtergrond">
<img class="foto" src="http://i.imgur.com/u19t6iW.jpg" alt="Cover">
</div>
</body>
</html>
CSS:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
}
img.foto {
width: 250px;
height: auto;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
/* -webkit-transform-origin: 0 0;*/
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
-webkit-transform: matrix3d(0.8660254, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.8660254, 0, 0, 0, 0, 1);
}
Now this doesn't seem to enlarge the right corners of the book, so it doesn't seem like the cover is coming towards the user.
I've tried -webkit-perspective, transform-style,... but can't seem to get the desired effect.
try this css on image hover
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
I found how I need to fix this.
I tried the perspective and perspective-origin options before but didn't put them in the correct place.
These options have to be put in the parent element (here the "achtergrond"-div).
See w3schools with the quote
When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.
The new CSS is thus:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
-webkit-perspective: 250px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 100% 30%; /* Chrome, Safari, Opera */
}
img.foto {
width: 250px;
height: auto;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
}
Related
Long story made short I am trying to work on a page that will be showing a playing card that I want to animate flipping over to the back side and back again at certain points. So far I've been using a lot of the code from this useful blog post to do so: https://manjitkarve.com/posts/card-flip-interaction/
What I'm trying to add on now is a clip-path as the majority of my card images are not 'clean' and have some jank white lines around the image and using clip-path in CSS seemed like the cleanest way to nail this. And so far isolated on its own it is doing the job swimmingly.
However with the clip-path added in, my card flip transitions are messed up. As an example: If I am sitting on the 'front' face of the card and ask it to flip to the back, it flips to a mirrored version of the front face instead. Once I take clip-path out, it's back to normal.
There's a LOT of moving parts to my code now but I'll post what I can/what's relevant. As an addition note, I'm also using the SWUP JS library in here but that functionality is working fine and best I can tell is not interfering with this currently. If I call these card transitions manually outside of SWUP, I get the same behavior:
HTML:
<main id="swup">
<div id="swup-card-img card_img_overlay" class="card-left-half card transition-flip center">
<div class="front face" style="background-image:url('{{ card.card_image.url }}')"></div>
<div class="back face" style="background-image:url('{% static 'img/fow_cardback.png' %}')"></div>
</div>
</main>
CSS:
.transition-flip {
transition: transform 1.0s;
transform-style: preserve-3d;
}
.transition-flip .card .front {
transform: rotateX(0deg);
}
.transition-flip .card .back {
transform: rotateX(180deg);
}
html.is-animating .transition-flip {
transform: rotateY(180deg);
transition: transform 1.0s;
}
html.is-leaving .transition-flip {
transform: rotateY(180deg);
transition: transform 1.0s;
}
.card {
/* Card height to width ratio is 1.396 rounded */
width: 50vw;
height: 69.8vw;
position: relative;
perspective: 100vw;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
display: inline-block;
clip-path: inset(0.3% 0.2% 0.0% 0.2% round 3.9%);
background: rgba(0, 0, 0, 1.0);
}
.card .face {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), box-shadow 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), border-width 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98);
box-shadow: 0px 1.2vw 4vw -1vw rgba(0, 0, 0, 0.6);
background-position: 0 0;
background-size: 50vw;
background-repeat: no-repeat;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 1.1vw;
}
.card .front {
}
.card .back {
transform: rotateY(180deg);
transform: rotateX(180deg);
}
.center {
margin:0 auto;
}
This sample of rolling 3D cube does not work correctly on Internet Explorer.
There is must be rotation on 360 degrees like in other browsers.
Which of vendor prefixes are missing?
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
random text for submitting post insted of more details
/* animation speed */
.container {
-webkit-animation: rotate 18s infinite linear;
animation: rotate 18s infinite linear;
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube {
width:240px;
height:400px;
margin-top:-20px;
-ms-perspective:1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
-ms-perspective-origin: center center;
-webkit-perspective-origin: center center;
perspective-origin: center center;
}
.container {
display:block;
width: 240px;
height: 400px;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side {
display:block;
position: absolute;
width: 240px;
height: 400px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.face1 {
-webkit-transform: translateZ(120px);
transform: translateZ(120px);
background-color: green;
}
.face2 {
-webkit-transform: translateX(120px) rotateY(90deg);
transform: translateX(120px) rotateY(90deg);
background-color: red;
}
.face3 {
-webkit-transform: translateZ(-120px) scale(-1, 1);
transform: translateZ(-120px) scale(-1, 1);
background-color: teal;
}
.face4 {
-webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
transform: translateX(-120px) rotateY(90deg) scale(-1, 1);
background-color: black;
}
#-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
#keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>
Have a look here : https://caniuse.com/#search=perspective
As they say for perspective, it is partially supported by ie :
Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.
You will have to use another method for ie.
Related post : Transform-Style preserve-3d in internet explorer CSS not working
Hope this help
As it is already suggested by other community member that transform-style preserve-3d is not supported in IE.
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.
Reference:
Internet Explorer Preserve 3D fix
When I try to scale a div on mouse hover, the text wobbles/jitters and the animation is not smooth. This is especially apparent in FireFox, but can also be seen in Chrome.
Are there any changes I can do to make the animation smooth?
JS Fiddle: https://jsfiddle.net/jL4dbxf9/
.mtw {
max-width: 200px;
margin: 0 auto;
}
.mt .mp {
text-align: center;
}
.mt .mp .ma {
color: #fff;
font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
min-height: 60px;
}
.mt .header-blue {
background: blue;
}
.mt {
transition: all 0.4s linear;
}
.mt:hover{
z-index: 1;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
}
<div class="mtw">
<div class="mt">
<div class="header-blue">
<h2 class="mp">
<span class="ma">49</span>
</h2>
</div>
</div>
</div>
So you've got multiple things going on here, and unfortunately it's going to require various things between browsers as you tackle some of the nuances of the measure / arrange passes, anti-aliasing, hardware acceleration, perspective, etc...
.mtw {
max-width: 200px;
margin:0 auto;
}
.mt .mp { text-align: center }
.mt .mp .ma {
color: #fff;
font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
min-height: 60px;
}
.mp { margin: 0 }
.mt .header-blue {
background: blue;
}
.mt {
transition: all 0.4s linear;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.mt:hover {
z-index: 1;
-webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}
/* --- cleaner way --- */
#boom {
color: #fff;
background-color: blue;
font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
min-height: 60px;
max-width:200px;
margin:0 auto;
text-align: center;
transition: transform 0.4s linear;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
will-change: transform;
}
#boom:hover {
-webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
-ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}
/* --- Another way --- */
#weee {
color: #fff;
background-color: blue;
font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
min-height: 60px;
max-width:200px;
margin:0 auto;
text-align: center;
transition: font-size 0.4s linear;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
will-change: font-size;
}
#weee:hover {
font-size: 120px;
}
<div class="mtw">
<div class="mt">
<div class="header-blue">
<h2 class="mp">
<span class="ma">49</span>
</h2>
</div>
</div>
</div>
<br/><br/>
Or, cleaner way....
<div id="boom">50</div>
<br/><br/>
Or, an entirely different way...
<div id="weee">51</div>
So if we look through the changes, we see some things added...
backface-visibility: hidden; = The user doesn't care about the back, remove it from the compositor consideration...
-webkit-font-smoothing: subpixel-antialiased; = I'm sure the font is cool, but you re-try redrawing all the pixel specific shading crap on the fly smoothly....
translate3d( 0, 0, 0) = 'ol hack to force hardware acceleration in some instances and let the gpu help out.
margin: 0 = on your h2 to remove the user agent margin garbage from consideration...
perspective(1px) = Because you're transforming, remind it where home is...
Between these hopefully you should see the result you're expecting, hope it helps, cheers!
Oh, and just a quick PS: You don't need that many elements to accomplish the same thing (unless there's more to your example than what we see), I would try to shake that habit. One element and some text could deliver the same result with a cleaner DOM and less for the compositor thread to care about while doing its thing.
ADDENDUM; Eventually with scale you're going to run into a resolution loss as it's resizing an elements dimensions and its children on a 2d plane with a rasterization. Avoiding blurry effect the larger something is scaled is inevitable (as far as I know today) unless you want refactor into say a canvas with zoom, or easier yet treat the instance for what it is and instead just target the font in this scenario since it's the only thing actually needing to stay legible. So see the added example, which is targeting font-size as a vector instead. Cheers!
I think a couple things are happening. But this should fix it:
.mt {
transition: transform 0.4s linear;
transform: scale(.9);
}
.mt:hover{
z-index: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
It is difficult to scale text. The reason I believe you are seeing it jump is that the text is recalculating line height and letter spacing during your animation.
The more important problem that I saw was that you set scale to over 1. Scale should start small and end at 1 as the biggest. You can see scale jank when you scale a picture over 1 really clearly.
When animating a modal the text was jumping and this solved my issue:
.modal > * {
transform: scale(1.000001);
}
Which don't seems to modify dimensions too much, and worked out :)
The following code works in all browsers except for IE.10.
MSDN website says the following (which I do not understand how to apply):
Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. 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.
https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx
My code (I'm using CSS selectors for other reasons):
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}
<div class="flip1">
<div class="card">
<div class="face front">Front content</div>
<div class="face back">Back content</div>
</div>
</div>
Could you please help me with this?
Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).
Internet Explorer 10 and 11 'have only partial support' because:
not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.
further Reading
This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.
Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).
In answer to your question
Note The W3C specification defines a keyword value of preserve-3d for
this property, which indicates that flattening is not performed. 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.
This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.
In all versions of IE, preserve-3d does not work. In Microsoft Edge, it does.
You can apply a 3D transformation to any element, but if it's parent is 3D transformed as well then the transformation will NOT work; the element will be flattened
so IE10 or IE11 = no fun in 3D.
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?