tool for plot transform matrix - html

have tool for help me plot 3D transform matrix from image
to html 5 canvas like this
max-width: intrinsic;
-moz-transform: matrix(1, 0, 0.6, 1.5, 15em, 0);
-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);

Related

How to apply 3D transform only to part of an element in CSS?

I have a container with a gradient mask adding transparency to the top of the view as follows :
.container{
position: fixed;
top: 0;
height: 100vh;
overflow: scroll;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 8vh, rgba(0, 0, 0, 1) 30vh, rgba(0, 0, 0, 1));
Is there any way in css to apply this 3d transform only to the top part of the container? Maybe with a 3D matrix?
transform: perspective(1000px) rotateX(10deg);
The objectif being to give a little star wars opening credits style to the fade-out, but only to the topmost part of the view.
Thanks for the help :)

gltranslatef doesn't move all of my double int. array

I am working on a 2D platformer, and want the map to move (not too advanced, since I am only in "devstage 1") but when I apply the gltranslatef it doesn't move all textures, only the one in the top left corner.
this is the code, don't worry about other classes because they all work fine.
package Window;
import static org.lwjgl.opengl.GL11.*;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import controls.TileChanger;
import Functions.renderer;
import Window.GridHandler;
public class Main {
public static void main(String[] args) {
renderer.begin();
int[][] map = {{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}
};
GridHandler grid = new GridHandler(map);
TileChanger changer = new TileChanger(grid);
float translate_x = 0;
float translate_y = 0;
int speed = 5;
while(!Keyboard.isKeyDown(Keyboard.KEY_Q)) {
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glTranslatef(translate_x, translate_y, 0);
glEnable(GL_TEXTURE_2D);
if (Keyboard.isKeyDown(Keyboard.KEY_D)) {
translate_x += speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_A)) {
translate_x -= speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_S)) {
translate_y += speed;
}
if (Keyboard.isKeyDown(Keyboard.KEY_W)) {
translate_y -= speed;
}
changer.Update();
grid.draw();
glPopMatrix();
Display.update();
Display.sync(60);
}
Display.destroy();
System.exit(0);
}
}
can someone show me how I can apply the gltranslatef to all of the map[][]?
thank you.

Multiple animations with CSS3 not working as expected

I have a set of divs that I'm animating in different ways. The first one swings/flips onto the stack using:
#-webkit-keyframes cardflip {
from {
-webkit-transform: perspective(2000) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
}
to {
-webkit-transform: perspective(2000) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
}
}
While the others are using transforms:
#cards .card:nth-child(2) { -webkit-transform: translate3d(0, 171px, 0); transform: translate3d(0, 183px, 0); }
#cards .card:nth-child(3) { -webkit-transform: translate3d(0, 342px, 0); transform: translate3d(0, 352px, 0); }
#cards .card:nth-child(4) { -webkit-transform: translate3d(0, 513px, 0); transform: translate3d(0, 521px, 0); }
#cards .card:nth-child(5) { -webkit-transform: translate3d(0, 684px, 0); transform: translate3d(0, 690px, 0); }
#cards .card:nth-child(6) { -webkit-transform: translate3d(0, 855px, 0); transform: translate3d(0, 859px, 0); }
#cards .card:nth-child(7) { -webkit-transform: translate3d(0, 1026px, 0); transform: translate3d(0, 1028px, 0); }
What I expect to happen is when I add a new div in the first position the other 'cards' slide down, and the first one flips into the top position. But it seems that the way I have it set up, the sliding animation doesn't happen when I add the new div on top of the stack, it just snaps to its new position. How can I fix this?
By the way, I'm only working in Chrome, hence the lack of non-webkit prefixes.
Fiddle.

You have to do it with a little bit of javascript, toggling a class instead. This is because the CSS selector of first child is immediately used and because transferring from an animation to a transition doesn't work the way you might think it might
var count = 0;
setInterval(function() {
$('#cards').prepend('<div class="card">testadd' + count++ + '</div>' );
setTimeout(function() {
document.getElementsByClassName("card")[0].className = "card first";
}, 10); // Fire just after it's added so it transitions
$('#cards .card:last').remove();
}, 5000);
CSS
#cards .first { -webkit-transform:translate3d(0,0,0) rotateY(0deg); }
#cards .card:nth-child(1) { z-index: 1000; }
Demo
(The count was for testing purposes)

CSS is not working in FireFox

The main issue is the following. All images are showing as broken links in FireFox and they are fine in other browsers like Safari, Opera and Chrome.
Then I contacted the support they said it is known issue with CSS when it comes to FireFox.
Here is my CSS code
<head>
<title>My Booklet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-table-5il4 {
background-image: none;
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
}
.gwd-tr-qiqz {
background-image: none;
}
.fadein { position:relative; height:335px; width:223px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 700);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
Appreciate any help on this.
I have added some additional script that I am using. the rest of the HTML file is sort of basic html tag for tables, images, and URLs.
Regards,

-webkit is a prefix for Chrome and Safari, it has no effects on Firefox. Firefox one is -moz
Try to add -moz prefixes like :
/* Chrome and Safari */
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
/* Firefox */
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;
/* Other */
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;
Edit: Add no prefixed properties as Volvox pointed out

For firefox
Add properties with -moz too
-webkit is only for chrome and safari
for example
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;

webkit is for google chrome and safari, firefox don't understand this. It use -moz....
like -moz-border-radius
You have to check if firefox can support these functionality.

The first-child has a space in it. Otherwise it works
Old
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
New
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
http://jsfiddle.net/nZFnS/

Flipping/Inverting/Mirroring text using css only

I did some googling and here's my answer
.mirror {
display: block;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
}
<!--[if IE]>
<style>
.mirror {
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
<![endif]-->
<div class="mirror">testing</div>
The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.

Your code is correct but there is an easier way to do this:
img.flip {
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Webkit */
transform: scaleX(-1); /* Standard */
filter: FlipH; /* IE 6/7/8 */
}
I think this solves your centered mirroring issue.
As noted you will have to set the element to use a display of block, inline-block etc.

to mirror use transform: scaleX(-1); to flip use rotate(180deg);