java transform的作用,CSS transform-style属性实现3D效果

相对于transform-style:flat，在2d平面呈现，transform-style:preserve-3d则将所有子元素呈现在3d空间中。

实例：

HTML：

鼠标放到图片上面来查看效果哦！(图片反转360度)

鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)

CSS：

.transform-style .container {

width:500px;

height:300px;

margin:10px auto;

position:relative;

}

.transform-style .inner {

width:142px;

height:200px;

position:absolute;

}

//设置动画

@keyframes inner{

0%{

transform:rotateY(0deg)

}

100%{

transform:rotateY(360deg)

}

}

//调用动画

.transform-style .inner:hover{

animation:inner 5s linear infinite;

}

.transform-style .rotate {

background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;

border: 5px solid hsla(50,50%,50%,.9);

transform: perspective(200px) rotateY(45deg);

}

.transform-style .rotate img{

border: 1px solid green;

transform: rotateX(15deg) translateZ(10px);

transform-origin: 0 0 40px;

}

//改变transform-style的默认值

.transform-style .three-d {

transform-style: preserve-3d;

}

css transform旋转属性

将以下代码复制到本地就可以看到效果:

CSS Transform Style

As CSS3 developing quickly, the transform style can be written conviently. I find that it is an inte ...

transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。

该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...

CSS Transform / Transition / Animation 属性的区别

back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

CSS style 属性

CSS style 属性 定义和用法 必需的 type 属性规定样式表的 MIME 类型. type 属性指示 标签之间的内容. 值 &q ...

CSS3打造3D效果——perspective transform的深度剖析

声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

CSS3之3D效果中的transform运用

css3中添加了很多新的标签 属性 描述 css transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的位置. 3 transform-s ...

transform做2d和3d变形(css动画一)

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

CSS环绕球体的旋转文字-3D效果

代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

随机推荐

php gettext 多语言翻译

1.在window与linux下的多语言切换有些区别,主要putenv的设置区别. 参考链接:http://www.cnblogs.com/sink_cup/archive/2013/11/20/ub ...

Intent组件的传参应用

Intent是要执行的操作的抽象描述 可以在startActivity.startService等方法中使用 最为常见的用法是在Activity之间传递数据 跳转并传值: Intent intent= ...

[ZT] 酒店大洗脑：最全各大国际酒店集团族谱图