详解IE10下CSS3 3D变换Word文件下载.docx
《详解IE10下CSS3 3D变换Word文件下载.docx》由会员分享，可在线阅读，更多相关《详解IE10下CSS3 3D变换Word文件下载.docx（16页珍藏版）》请在冰豆网上搜索。
css3多列
Flexbox
grid
定位浮动（positioned
float）
transfrom）
动画（animation）
渐变（gradient）
text-shadow
去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。
因CSS3新特性众多，今天笔者就IE10下CSS3的新特性做详细介绍，并附上实例源码，笔者也会抽更多的时间去总结CSS3的其他特性，并给出实例，希望各位爱好者一起探讨、交流：
在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。
将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。
CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。
使用格式:
transform:
rotate（45deg）
deg是CSS3的“Values
and
Units”模块中定义的一个角度单位
1）旋转：
rotate（）
方法
通过
方法，元素顺时针旋转给定的角度。
允许负值，元素将逆时针旋转。
案例源代码
[html]
viewplaincopy
1.<
!
DOCTYPE
html>
2.
3.<
4.
5.
<
head>
6.
7.
meta
charset="
utf-8"
/>
8.
9.
title>
IE10下CSS3新特性之3D变换（3D
transfrom）应用实例-liwei3gjob<
/title>
10.
11.
style>
12.
13.
div
{
14.
15.
width:
300px;
16.
17.
margin:
150px
auto;
18.
19.
background-color:
yellow;
20.
21.
text-align:
center;
22.
23.
-webkit-transform:
rotate（45deg）;
/*
for
Chrome
||
Safari
*/
24.
25.
-moz-transform:
Firefox
26.
27.
-ms-transform:
IE
旋转45度*/
28.
29.
-o-transform:
Opera
30.
31.
}
32.
33.
/style>
34.
35.
/head>
36.
37.
body>
38.
39.
div>
/div>
40.
41.
/body>
42.
43.
/html>
效果:
2）缩放：
scale（）
方法，元素的尺寸会增加或减少，根据给定的宽度（X
轴）和高度（Y
轴）
案例源代码:
scale（0.5）;
缩放0.5
43.<
3）倾斜：
skew（）
方法，元素转动给定的角度，根据给定的水平线（X
轴）和垂直线（Y
源代码:
transfrom）及实例教程-liwei3gjob<
skew（30deg,
30deg）;
4）移动：
translate（）
方法，元素从其当前位置移动，根据给定的
left（x
坐标）
和
top（y
坐标）
translate（50px,
50px）;
值
translate（50px,50px）
把元素从左侧移动
50
像素，从顶端移动
100
像素。
29.*/
44.
45.<
3D变换Perspective：
perspective
变换函数对于
3D
变换来说至关重要。
该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个
2D
视平面上。
如果不指定透视，则
Z
空间中的所有点将平铺到同一个
视平面中，并且变换结果中将不存在景深概念。
对于某些变换，例如下图显示的沿
轴的变换，perspective
变换函数对于查看变换的效果来说必不可少。
transfrom）及实例教程-liwei3gjob-liwei3gjob<
perspective（500px）
rotateY（40deg）;
5）动画和过渡实现3D变换：
#div1
transform-origin:
500px;
animation:
scrollText
200s
linear
infinite;
22.#parentDiv
perspective:
perspective-origin:
28.}
31.@keyframes
33.0%
rotateX（45deg）
translateY（500px）;
35.100%
translateY（-9000px）;
37.}
45.
id="
parentDiv"
>
div1"
br>
46.
47.详解IE10下CSS3
48.
49.详解IE10下CSS3
50.
51.详解IE10下CSS3
52.
53.详解IE10下CSS3
54.
55.详解IE10下CSS3
56.
57.
58.
59.<
文字渐渐离去效果
以上是笔者对IE10下CSS3
transfrom）及实例教程,后续还会抽空整理IE10下更多CSS3新特性的文章。
大升刷票整理
升级会员 