admin管理员组

文章数量:1130349

perspective 多角度查看元素

开发工具与关键技术：DreamWeaver    perspective属性
作者:听民谣的老猫
撰写时间：2019/2/1   14:15

我们经常会以九宫图的方式去展现一些照片:

上面是九宫图最普遍的一种展现方式了，看多了?看腻了?

试试换不同方式不同角度去展现这组九宫图:

这种重叠效果不是旋转，扭曲做出来的。它只是改变了你看这组九宫图的角度，通过使用css3 3D转换中用perspective属性来营造一种不同角度的视图感。

.design{
	width: 300px;
	height: 200px;
	margin-left: 550px;
	margin-top: 200px;
	perspective: 400px;
}

只需要在css样式中添加perspective属性就可以达到上面的效果，不同的赋值就是不同的角度。

  • 用处：设置从何处查看一个元素的角度
  • 并不是使用浏览器都可以使用perspective属性
  • 属性定义及使用说明
    1 ：多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
    2：定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
默认值：none
继承：no
版本：css3
JavaScript 语法：object.style.perspective=500
  • 语法
perspective: number|none
值描述
number元素距离视图的距离，以像素计。
none默认值。与 0 相同。不设置透视。

简单理解就可以快速运用CSS3 3D转换中用perspective实现不同角度查看元素，快去试试吧。

perspective 多角度查看元素

开发工具与关键技术：DreamWeaver    perspective属性
作者:听民谣的老猫
撰写时间：2019/2/1   14:15

我们经常会以九宫图的方式去展现一些照片:

上面是九宫图最普遍的一种展现方式了，看多了?看腻了?

试试换不同方式不同角度去展现这组九宫图:

这种重叠效果不是旋转，扭曲做出来的。它只是改变了你看这组九宫图的角度，通过使用css3 3D转换中用perspective属性来营造一种不同角度的视图感。

.design{
	width: 300px;
	height: 200px;
	margin-left: 550px;
	margin-top: 200px;
	perspective: 400px;
}

只需要在css样式中添加perspective属性就可以达到上面的效果，不同的赋值就是不同的角度。

  • 用处：设置从何处查看一个元素的角度
  • 并不是使用浏览器都可以使用perspective属性
  • 属性定义及使用说明
    1 ：多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
    2：定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
默认值：none
继承：no
版本：css3
JavaScript 语法：object.style.perspective=500
  • 语法
perspective: number|none
值描述
number元素距离视图的距离，以像素计。
none默认值。与 0 相同。不设置透视。

简单理解就可以快速运用CSS3 3D转换中用perspective实现不同角度查看元素，快去试试吧。

本文标签： 中用元素角度perspective

版权声明：本文标题：CSS3 3D转换中用perspective实现不同角度查看元素 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758690345a2782921.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。