Animation, 2D conversion, 3D conversion how to use

Source: Internet
Author: User
Tags mathematical functions

Animation
    @keyframes rules are used to create animations.          By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style. property {[email protected] 2animation} such as: @keyframes Myfirst {from {Backgro            und:red;}            to {Background:yellow;}            } @-moz-keyframes Myfirst/* Firefox */{from {background:red;}            to {Background:yellow;}            } @-webkit-keyframes Myfirst/* Safari and Chrome */{from {background:red;}            to {Background:yellow;}            } @-o-keyframes Myfirst/* Opera */{from {background:red;}            to {Background:yellow;}                 ---------------------------------------------------you create an animation in a @keyframes, bundle it to the specified 1. Name of the animation    2. Specify the duration of the animation, otherwise it will not produce animation effect.            such as: div {Animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */-webkit-animation: Myfirst 5s;   /* Safari and Chrome */-o-animation:myfirst 5s;    /* Opera */} uses percentages to specify when changes occur, or the words "from" and "to", equivalent to 0% and 100%.        ---------Change the background color when the animation is 25% and 50%, and then change it again when animation 100% finishes: @keyframes Myfirst {0% {background:red;}        25% {background:yellow;}        50% {background:blue;}        100% {background:green;}        } @-moz-keyframes Myfirst/* Firefox */{0% {background:red;}        25% {background:yellow;}        50% {background:blue;}        100% {background:green;}        } @-webkit-keyframes Myfirst/* Safari and Chrome */{0% {background:red;}        25% {background:yellow;}        50% {background:blue;}        100% {background:green;}        } @-o-keyframes Myfirst/* Opera */{0% {background:red;}        25% {background:yellow;}        50% {background:blue;}        100% {background:green;} }    -------------------------------Attribute Description @keyframes the specified animation. Animation The shorthand properties of all animated properties except the Animation-play-state property Animati     ON-NAME Specifies the name of the @keyframes animation. Animation-duration specifies the seconds or milliseconds that the animation takes to complete a cycle.      The default is 0. animation-timing-function Specifies the speed curve of the animation.    The default is "ease". Animation-delay Specifies when the animation starts.     The default is 0. ANIMATION-ITERATION-COUNT specifies the number of times the animation is played.     The default is 1. Animation-direction Specifies whether the animation will play backwards in the next cycle.      The default is "normal".                          ANIMATION-PLAY-STATE Specifies whether the animation is running or paused.     The default is "running".    ANIMATION-FILL-MODE specifies the state outside the animation time of the object. ----------------------------------------------
Conversion
    : With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements. 2d2d Conversion Method: Translate () rotate () scale () skew () matrix () such as: Div{transform:rotate (30deg);-ms-trans       Form:rotate (30DEG);   /* IE 9 */-webkit-transform:rotate (30deg);        /* Safari and Chrome */-o-transform:rotate (30deg);      /* Opera */-moz-transform:rotate (30deg); /* Firefox */} through the Translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters.       such as: Div{transform:translate (50px,100px);-ms-transform:translate (50px,100px);   /* IE 9 */-webkit-transform:translate (50px,100px);        /* Safari and Chrome */-o-transform:translate (50px,100px);      /* Opera */-moz-transform:translate (50px,100px);    /* * Firefox */} through the scale () method, the size of the element will increase or decrease, depending on the given width (X axis) and height (Y axis) parameters: such as div {transform:scale (2,4);  -ms-transform:scale (2,4);  /* IE 9 */-webkit-transform:scale (2,4);   /* Safari and Chrome */-o-transform:scale (2,4); /* Opera */-moz-transform:scale (2,4); /* Firefox */} through the skew () method, the element flips the given angle, according to the given waterHorizontal line (X axis) and vertical line (Y axis) Parameters: Div{transform:skew (30deg,20deg),-ms-transform:skew (30DEG,20DEG);   /* IE 9 */-webkit-transform:skew (30deg,20deg);    /* Safari and Chrome */-o-transform:skew (30DEG,20DEG);  /* Opera */-moz-transform:skew (30deg,20deg); /* Firefox */}matrix () method The Matrix () method combines all 2D conversion methods. The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements. For example: Use the matrix method to rotate the DIV element 30 degrees: Div{transform:matrix (0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix (0.866,0.5,-     0.5,0.866,0,0); -moz-transform:matrix (0.866,0.5,-0.5,0.866,0,0);-webkit-transform:matrix (0.866,0.5,-0.5,0.866,0,0);-o-      Transform:matrix (0.866,0.5,-0.5,0.866,0,0); }
3D Conversion
3D 转换方法:rotateX() rotateY() 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。如:div{transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */-moz-transform: rotateX(120deg);    /* Firefox */}通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。如:div{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */-moz-transform: rotateY(130deg);    /* Firefox */}属性                描述 transform        向元素应用 2D 或 3D 转换。 transform-origin 允许你改变被转换元素的位置。 transform-style  规定被嵌套元素如何在 3D 空间中显示。 perspective       规定 3D 元素的透视效果。 perspective-origin 规定 3D 元素的底部位置。  

Animation, 2D conversion, 3D conversion how to use

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.