详解IE10 下CSS3 3D变换(3D transfrom)及实例教程

最新推荐文章于 2024-08-29 09:02:22 发布
最新推荐文章于 2024-08-29 09:02:22 发布
阅读量9.4k 收藏 5
点赞数 2
分类专栏： html5基础 html5网站 html5实例 html5新特性 文章标签： 3D CSS3 html5 实例 3D transfrom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liwei3gjob/article/details/8865874
版权

     详解IE10 下CSS3 3D变换(3D transfrom)及实例教程,本文章所有实例均可无需修改,直接运行.

     自2011年4月，微软在其召开的MIX11技术大会上发布了IE10浏览器的首个平台预览版，并宣布面向公众开放免费下载,并随后陆续发布了一系列的预览版，IE10在硬件加速、数据处理速度、网站页面打开速度上都有了提升，在页面处理和视觉处理功能上也进行了加强。

但令开发者关注和热议的还是IE10能否更好地支持HTML5? 因为早在IE10之前就有人这样评论IE浏览器：IE浏览器是Web新技术发展道路上的绊脚石。IE6的辉煌时代已经结束，IE7也是这样，即便是IE8，也仍然不能称为一款“现代浏览器”。而IE9对HTML5的支持尚不完全，比如不支持Web Sockets和Web Workers。要知道这两项可是对HTML5来说是非常重要的新特性。

    笔者个人认为IE10浏览器单从对HTML5支持来说，是微软IE浏览器系列中具有里程碑意义的产品，笔者评测结果如下：

   

  

由以上评测结果可以看出IE10IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。(http://msdn.microsoft.com/en-us/ie/gg192966)

,其中CSS3新特性包括：

CSS3

· css region

· css3多列

· Flexbox

· grid

· 定位浮动(positioned float)

· 3D变换(3D transfrom)

· 动画(animation)

· 渐变(gradient)

· text-shadow

· 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

因CSS3新特性众多，今天笔者就IE10下CSS3的新特性做详细介绍，并附上实例源码，笔者也会抽更多的时间去总结CSS3的其他特性，并给出实例，希望各位爱好者一起探讨、交流：

· 3D变换(3D transfrom)

    在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。

CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。

使用格式:   transform: rotate(45deg)  deg是CSS3的“Values and Units”模块中定义的一个角度单位

1)旋转：

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

案例源代码

<!DOCTYPE html>

<html>

    <head>

          <meta charset="utf-8" />

          <title>IE10下CSS3新特性之3D变换(3D transfrom)应用实例-liwei3gjob</title>

         <style>

          div {

              width: 300px;

             margin: 150px auto;

            background-color: yellow;

             text-align: center;

             -webkit-transform: rotate(45deg);    /* for Chrome || Safari */

             -moz-transform: rotate(45deg);       /* for Firefox */

             -ms-transform: rotate(45deg);        /* for IE  旋转45度*/

             -o-transform: rotate(45deg);         /* for Opera */

         }

         </style>

     </head>

     <body>

         <div>IE10下CSS3新特性之3D变换(3D transfrom)应用实例-liwei3gjob</div>

     </body>

 </html>

 

效果:

2)缩放：

scale() 方法

    通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）

案例源代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>IE10下CSS3新特性之3D变换(3D transfrom)应用实例-liwei3gjob</title>

        <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: scale(0.5);     /* for Chrome || Safari */

            -moz-transform: scale(0.5);        /* for Firefox */

            -ms-transform: scale(0.5);         /* for IE 缩放0.5 */

            -o-transform: scale(0.5);          /* for Opera */

        }

        </style>

    </head>

    <body>

        <div>IE10下CSS3新特性之3D变换(3D transfrom)应用实例-liwei3gjob</div>

    </body>

</html>


效果:

3)倾斜：

skew() 方法

通过 skew() 方法，元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）

源代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob</title>

        <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: skew(30deg, 30deg);    /* for Chrome || Safari */

            -moz-transform: skew(30deg, 30deg);       /* for Firefox */

            -ms-transform: skew(30deg, 30deg);        /* for IE */

            -o-transform: skew(30deg, 30deg);         /* for Opera */

        }

        </style>

    </head>

    <body>

        <div>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob</div>

    </body>

</html>


 

效果:

 

4)移动：

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）

源代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob</title>

        <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: translate(50px, 50px);    /* for Chrome || Safari */

            -moz-transform: translate(50px, 50px);       /* for Firefox */

            -ms-transform: translate(50px, 50px);        /* for IE 值 translate(50px,50px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

*/

            -o-transform: translate(50px, 50px);         /* for Opera */

        }

        </style>

    </head>

    <body>

        <div>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob</div>

    </body>

</html>


效果:

3D变换Perspective：

perspective 变换函数对于 3D 变换来说至关重要。该函数会设置查看者的位置，并将可视内容映射到一个视锥上，继而投影到一个 2D 视平面上。如果不指定透视，则 Z 空间中的所有点将平铺到同一个 2D 视平面中，并且变换结果中将不存在景深概念。对于某些变换，例如下图显示的沿 Z 轴的变换，perspective 变换函数对于查看变换的效果来说必不可少。

源代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob</title>

        <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: perspective(500px) rotateY(40deg);     /* for Chrome || Safari */

            -moz-transform: perspective(500px) rotateY(40deg);        /* for Firefox */

            -ms-transform: perspective(500px) rotateY(40deg);         /* for IE 缩放0.5 */

            -o-transform: perspective(500px) rotateY(40deg);          /* for Opera */

        }

        </style>

    </head>

    <body>

        <div>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob</div>

    </body>

</html>


 

效果:

5)动画和过渡实现3D变换：

源代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob</title>

        <style>

        #div1 {

         transform-origin: 150px 500px;

 animation: scrollText 200s linear infinite;     

        }


#parentDiv {

    perspective: 500px;

    perspective-origin: 150px 500px;

}


@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-9000px); }

}

        </style>

    </head>

    <body>

        <div id="parentDiv"><div id="div1">详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>

详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>

详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>

详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>

详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br>

详解IE10下CSS3 3D变换(3D transfrom)及实例教程-liwei3gjob-liwei3gjob<br></div></div>

    </body>

</html>


 

效果:

文字渐渐离去效果

以上是笔者对IE10下CSS3 3D变换(3D transfrom)及实例教程,后续还会抽空整理IE10下更多CSS3新特性的文章，敬请关注,文章原创，转载请注明出处！。

IT伟哥
关注
专栏目录
css3的三D效果transform实例
瓶起子的博客
01-29 1557
要用CSS3实现3D效果，先看个图 perspective设置景深，也就是Z轴的距离。 perspective-origin:设置视角，不同视角看到同一个立体是不同的表现。 设置好这些，就可以构建你想要的，立体图形，在构建前，构建前生成容器，要让容器内元素也保持3D效果，就要在样式添加transform-style: preserve-3d; 定义容器内元素位置，用到transfo
CSS 3D转换（含案例）
LttleJoker的博客
11-12 1005
transform加到需要3D转换的元素上，perspective加到父元素上：
探索未来驾驶：3DTrans开源项目深度解析
最新发布
gitblog_00669的博客
08-29 410
探索未来驾驶：3DTrans开源项目深度解析 3DTransAn open-source codebase for exploring autonomous driving pre-training项目地址:https://gitcode.com/gh_mirrors/3d/3DTrans 在自动驾驶技术的快速发展中，数据处理和模型训练的效率成为了关键。今天，我们要介绍的是一个革命性的开源项目—...
ie10 3D变换
weixin_30432007的博客
01-11 111
ie10中新增特性——3d变换 先给大家看一个demo： http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm 通过这个demo大家可以很直观的查看关于3d变换的各个属性变化。 这里面罗列了3D变换的属性（函数） 这里简单说一下各个属性（函数）的作用： 2d平移...
CSS3 3D Transforms in IE10
weixin_33724059的博客
02-04 99
CSS3 features make it easier to build rich and immersive Web experiences. A recent post described how Web developers add personality to their sites with CSS3 Transitions and Animations. ...
利用HTML5+CSS3实现3D转换效果实例详解
09-24
对于css的二维世界，相信大家都不陌生。在二维的世界里，我们可以对元素设置宽高、位置、旋转、背景等等。在css三维世界里，扩展出了一个z轴，这个z轴垂直于屏幕并指向外面。下面这篇文章主要给大家介绍了利用HTML5+CSS3实现3D转换效果的相关资料，需要的朋友可以参考。
css3 transform旋转属性鼠标悬停3D立体图片旋转显示
11-03
总结，CSS3的`transform`属性和3D变换功能为我们提供了丰富的动态效果，使网页设计更具互动性和视觉吸引力。结合鼠标悬停事件和过渡动画，我们可以轻松创造出各种交互式用户体验，如本文介绍的3D立体图片旋转展示。...
CSS3中Transform动画属性用法详解
12-10
css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是...
CSS3 Transform动画属性详解与浏览器兼容指南
CSS3中的Transform动画属性是CSS3新增的重要功能，它扩展了网页布局和视觉效果的表达能力，通过transform、transition和animation三个核心动画属性，开发者能够实现各种动态和交互式的视觉效果。然而，由于它们是新...
点云仿射变换—open3d python
叶子的博客
04-27 6886
仿射变换、投影变换通俗理解，python open3d变换数据与源码实验，详解open3d的transform函数
纯css（css3）实现的3D场景布局（有动画）
05-13
效果是我在网上看到的，但我用纯css实现了一遍，3D场景布局，中间有一个3D的柱状图，镜头会围绕柱状图来回旋转，水平线下还会有倒影。
兼容所有浏览器的旋转插件
03-15
通过jquery 与css结合兼容ie6及ie6以上浏览器得 旋转插件demo 里面含有所有文件 包括html
CSS3 transform3D
weixin_30725315的博客
06-02 80
页面仔总是不甘于做页面仔，既然了解了transform3D怎么会放弃这个提升逼格的好机会啊。。虽然人家已经火了四五年了~~~~(>_<)~~~~，慢慢来骚年。 起：页面元素3D变换可以通过transform:rotateX(n deg) rotateY(m deg) rotateZ(x deg);实现。 1、对该元素或其父辈元素上创建三维场景 利用perspective...
CSS-3D动画笔记
diaoweisang7683的博客
05-10 158
3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（） 　　translateZ（）：以方框中心为原点，变大 3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（） 　　scaleZ（）和 scale3d（）函数单独使用时没有任何效果 3D 透视：perspective 规定...
CSS3之3D转换
LQlove1的博客
12-23 1880
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。内容里有旋转木马的案例
css3动画3D旋转案例
lucky_girl_girl的博客
02-03 565
1.transform-style:preserve-3d：让子元素在3d空间能占据位置 2.perspective:800px：定位视角，一般800px 在这里插入代码片 <html> <style> body{ perspective:800px; } .stage{ position:relative; width:200px; height:2...
web前端入门——CSS3-3D技术详解及案例
L3gacy
04-06 1396
CSS3-3D技术 景深 生活中的3d 区别于2d的地方 1、近大远小 景深 程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显） perspective: 1200px;（在父元素中使用） transform:perspective(1200px) （在子元素中使用） 两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间...
css3实现3D动画
weixin_35750483的博客
01-06 265
使用 CSS3 可以实现 3D 动画效果。要实现 3D 动画，需要使用 CSS3 中的 transform 属性。 要将一个元素变为 3D 元素，可以使用 transform: perspective(depth) 属性。depth 参数表示 3D 元素的透视深度，值越大，3D 效果越明显。 然后，可以使用 transform: rotateX(angle)、transform: rotateY(...
CSS3 Transform详解：2D与3D变换及动画应用
例如，Internet Explorer 10及以上版本支持标准的transform属性，而早期的IE9支持`-ms-transform`（仅限2D），Safari和Chrome支持`-webkit-transform`（支持2D和3D）。Opera对2D变换有支持，但不支持3D。因此，在...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值