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; }.
Looking to do a Parallax Effect on a skewed background. Had a look around on Google and the likes and can see everyone is doing this with an image. Just wondering if anyone has come across a solution where you can do this with a solid colour?
The reason I ask, Is that my design is a solid colour, However the background is using CSS3's Skew to transform the angle.
My current CSS (If it's any use) is as follows :
.diagonal {
transform: skew(0deg, 2deg);
background: #2188c9;
margin-top: -200px;
padding-top: 200px;
height: 220px;
}
.diagonal .content {
transform: skew(0deg, -2deg);
z-index: 1;
}
I've made a jsFiddle for this too.
If it's not achievable. I don't mind making a blue background image in its place.
Thanks
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!
I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
container to hold the rotated elements that will allow you to use perspective
perspective to change the overall look of the animation
transform-origin to set the rotation point of the image (using the bottom in the demo)
rotateX to rotate around the x axis - tilting the image toward/away from the viewer
html:
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300"></img>
</div>
CSS:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
Demo jsFiddle
CSS Supports X and Y 3D rotations, but you cannot rotate on the Z axis (forwards and backwards) purely in CSS, maybe Javascript or jQuery would be able to do so.
For more on CSS rotation try reading up on it here: http://www.w3schools.com/css/css3_3dtransforms.asp
I would play around with something like CAMANJS or just create a second background image that tilts your existing image and use that on the hover event.
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.