![]() A negative number again is going to go up which is a little unusual for a lot of people the first few times. Then if we want to move up or down, we do translateY. ![]() We can move the opposite way with a negative number like we did before. We'll do 50 pixels this time, and we'll see that our egg is now moving 50 pixels. We could do just the translateX and then we can give it a positive number again. You can just move this on one axis at a time. If you want to come the other way, you give it your positive number. If you want to go up, you give it a negative number. For this purpose, we can use the CSS transform property which allows us to alter the position, size, or shape of an element. If we want to move the opposite way, we give this negative numbers. It's moving 100 pixels down and 100 pixels over. Then when we hover, because we have this on the pseudo hover, we're going to see our egg move. The second number is for the Y-axis, which goes up and down. The first number is going to be for what's called the X-axis, which goes left and right. Translate, and we're going to give this two numbers. We're going to do transform, and then we're going to pick a translate, and you'll see that you can do translate, translateX, translateY are the ones we'll focus on. webkit-transform : matrix(0.866, 0.5, -0.5, 0.Christina Gorton: We're going to move the egg on the screen with translate, but first we want to use a transform. webkit-transform : rotate(30deg) translateX(200px) moz-transform : rotate(30deg) translateX(200px) moz-transform-origin : 0px 0px /* move the origin to top-left */ -webkit-transform-origin : 0px 0px /* move the origin to top-left */ Repeat this step until only one matrix remains, which will be the result matrix. With this step you have reduced the number of transformations by one. If you have more than two transformations, then multiply the first two matrices from right to left and replace them with the result matrix. If you want to perform these operations in reverse order, such as a horizontal translation by 5px followed by a horizontal reflection against the y-axis, you can do it by using one of the following methods: Example A rotated
element with an origin at the left center.
By default, the origin is located at (0,0), or (0,0,0) for 3D transformations. The origin is the reference point for the transformation calculations.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |