Internet http://www.aliyun.com/zixun/aggregation/29809.html ">explorer 9 introduces support for CSS 2D transformations. Internet Explorer Developer Preview adds support for CSS 3D transformations and CSS animations. With the power of the GPU and regular JavaScript running asynchronously, these IE10 features provide a more high-performance and flexible alternative than traditional scripting animations.
In previous posts, we introduced CSS 3D transformations as well as CSS animations and transitions. In this blog post, we introduce the "extraordinary" use of the above technologies by introducing the concept of "full-page animation." In the navigation process, the use of "full page animation" can improve the smoothness and continuity of browsing. Our goal is to achieve a seamless browsing experience, that is, when users click a link or perform related operations to access a page, the content of the Web page can be smoothly presented.
You can do this by using CSS animations to transform HTML <body> elements. However, the use case provides some considerations that we consider worth discussing, such as the effect of layout and size conversion <body>, and how to properly set the time required for page navigation so that the animation can be properly jointed.
The code example in this blog post uses CSS tags that are not prefixed (IE10 920.html ">release Preview provides support), and other browsers may require a vendor prefix for the CSS animations and CSS conversion properties used.
Convert the full contents of a page
CSS transformations are defined on the style properties of HTML DOM elements. For example, a marker that rotates an element 45 degrees along the z-axis is similar to the following:
#element {
Transform:rotatez (45DEG);
}
Attach a transformation to the <body> element of your HTML document in exactly the same way. So to execute sequentially to add the same effect to <body> declaratively, you can do the following similar code:
Body {
Transform:rotatez (45DEG);
}
Let's take a look at a screenshot of the page before and after applying the transform to the principal element:
Apply the Rotatez (45deg) conversion to the BODY element of the document.
For three-dimensional transformations, the CSS Transformation specification defines the perspective attribute that can be specified for the parent element of the element we are converting. When the <body> element of the content is converted, it will need to be applied to the <html> element (residing on the principal element on the DOM hierarchy). This is straightforward:
HTML {
perspective:500px;
}
Merging this code with the Rotatey (45deg) transformation on the <body> element can produce the following results:
This screenshot shows the Rotatey (45deg) conversion applied to <body> (its perspective is set to 500px on <html>).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
