I have a simple animation written in JavaScript using the p5.js library. I normally place scripts like these on the web using <script></script>, and place my canvas in the back using the CSS rules vertical-align: top; z-index: -1 the canvas of my animations normally scale dynamically, so no need for complicated CSS.
If if have a canvas with a fixed width and height (e.g. 600 x 400), is it possible to apply CSS 2D transforms like transform: translate(50px, 100px); transform: rotate(50px, 100px); to the entire canvas? And as a follow up question, how would I point my CSS at the script? Could I give the script it's own class? Or would I have to place the script inside a ?
Thanks!
Yes, you can apply CSS and 2d transforms on a fixed size canvas element.
canvas {
width: 600px;
height: 400px;
background: black;
transform: translate(50px, 100px); transform: rotate(45deg);
}
<canvas></canvas>
Re: styling a script - you don't style the script element itself, as that never displays in the browser. What you would do is style any elements that the script creates. So say the script creates a <div class="createdByJS">hello world</div> to the page, you would then style it via .createdByJs { color: red; }.
Related
This is a bit of a long-winded question, but I hope someone can break this down for me. I have 2 questions:
Why a CSS property doesn't do what it should.
Why this particular CSS property works on an unsuspecting element, and why it doesn't work on the CSS :hover selector.
Created a flipcard animation. Got some graphics/trailing lines issues with transitions (in Chrome).
Doing some Googling, I found out that apparently, using -webkit-transform: translate3d(0,0,0); is supposed to fix the issue by using hardware acceleration.
However, I couldn't figure out where to place this CSS property. I tried placing it on the .flipcard-container, .flipcard, on the actual transition (.flipcard-container: hover .flipcard).
None of these removed the trailing lines caused by the animation.
Question 1: Where can I use the -webkit-transform: translate3d(0,0,0); properly in order to take advantage of the hardware acceleration, and why does/doesn't it work there?
But, after doing even more Googling and copying someone else's code, I found adding perspective: 600pxto the .flipcard-container somehow fixed the issue. And on top of that, it even makes my animation look really nice.
It shouldn't bother me so much, but it does that I cannot figure out why this worked.
According to the MDN docs:
The perspective CSS property determines the distance between the z=0
plane and the user in order to give a 3D-positioned element some
perspective.
Question 2: Why does this work in my transition so well? Shouldn't I have to place perspective in .flipcard-container: hover .flipcard instead of the .flip-container?
Of course, when placing it in the css :hover selector, the entire transition stops working. Does the perspective property also use hardware acceleration?
Here is the code, and thank you in advance.
.flipcard-container {
height: 400px;
width: 300px;
/* uncommenting the below property will fix the issue */
/* -webkit-perspective: 600; */
}
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(1.5);
}
.flipcard, .front, .back {
width: 100%;
height: 100%;
}
.flipcard {
transform-style: preserve-3d;
transition: all .8s ease-in-out;
}
.front {
background: #6093e5;
position: relative;
backface-visibility: hidden;
}
.back {
background: #e56060;
position: absolute;
backface-visibility: hidden;
top: 0;
transform: rotateY(180deg);
}
<div class="flipcard-container">
<div class="flipcard">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
Question 1
You are overriding the transform: tags with the hardware acceleration. This causes that the animation doesn't work if you put it in.
You can use this, to archive better (more stable fps)
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(1.5);
will-change: -webkit-transition;
will-change: transition;
}
it uses the new will-change property.
More details
The will-change CSS property provides a way for authors to hint
browsers about the kind of changes to be expected on an element, so
that the browser can setup appropriate optimizations ahead of time
before the element is actually changed. These kind of optimizations
can increase the responsiveness of a page by doing potentially
expensive work ahead of time before they are actually required.
Question 2
If you look at e.g. this:
https://codepen.io/jfcorugedo/pen/bBPWaO?q=3d+turn&limit=all&type=type-pens
you see that it also uses the perspective tag. It is used that you can see the rotation of the box (like in your case).
If you remove it, it looks like your code. It works only on the container because the object you want to flip is wrapped in it.
If you have more questions just ask :)
I am trying to create a isometric tile engine just using <div> tags.
I've seen numerous isometric tiling engines for HTML5 but they are either poorly documented nor what I expected them to be (i.e. most are asking me to download freeware to develop on).
I'm trying to replicate this image in CSS3:
When trying to transform: rotate(deg) a div in CSS, I noticed that this tile is not equilateral, so the div box surpassed the image:
Can anybody shed some light on this?
Hope this helps. I also have a JSFiddle.
div {
background: #dedede;
width: 50px;
height:50px;
margin: 20px;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
<div></div>
I'm new to using SVG sprites but after watching a tree house video on SVG sprites I'm giving it a go. I'm using the same formatting they did in the video for a link with a background image of an SVG pulled from the sprite, namely:
Where the styles are:
.helpmepls {
background: url("sprite.svg") no-repeat;
height: 32px;
width: 32px;
background-position: -32px -128px;
-webkit-transform: scale(2.0);
-ms-transform: scale(2.0);
-o-transform: scale(2.0);
transform: scale(2.0);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
However whenever scaling the images larger than 1.0 they become pixelated in Edge (and probably IE, haven't checked) even though they look good in Chrome. Help on how to make browser-compatible? Do I need to be using a container, an svg element, a view element, viewbox, or some combination of those?
Here is a Demo ! You can download it from Here.
My workflow
You could control the scaling by changing the value of scaleValue from line 1 in JS.
var scaleValue = 1.2;
I usually use "inline" SVG and the GreenSock library to make animations!
When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.
some designs on the Apple's user's webpage show a photo that is tilted slightly, like at a 5 or 10 degree angle. while this is no big deal, it does make the webpage totally different from "all the rest".
is it true that currently using HTML or CSS, this can't be done yet?
like the big photo in the middle:
alt text http://img7.imageshack.us/img7/383/phototilt.png
(the program lets you choose photos and then create the page (html and jpg) dynamically for you)
CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.
Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.
Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.
You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.
Here's a nice example that builds a 3d looking cube out of divs: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
And CSS:
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
Yes, with CSS3 you can:
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
Supported by all the modern browsers and IE9+.
See CSS transform on MDN for more information.
To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?
You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.
Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.
We are doing something similar at work, we have to do it on the fly.
You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.
Use a PHP GD Library. Makes things so much easier.
No. You can't.
Tilting images and text is still JavaScript juju.
Edit: Or, at least, you couldn't with CSS2. Starting with CSS3, there's the transform property, which includes rotations.