transform: perspective 和 perspective 的区别

transform：perspective 和 perspective的区别

我们平时给元素设置视距，增加其3D效果。但是给父元素设置perspective属性和给自身直接设置transform：perspective属性有时候效果一样，有时候效果差别却很大。下面我根据自己的经验来浅谈一下自己的认识。

如果页面中只有一个元素的时候，给父元素加perspective：800px；（此处设置的值为800px）的效果和给自身加transform：perspective（800px）；的效果是一样的。

代码和效果图如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            /*perspective: 800px;*/
        }
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transform: perspective(800px) rotateY(50deg);
            /*transform: rotateY(50deg);*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

* 转换效果需把解注释，并且把之前的transform属性注释掉。

给父元素的自身分别设置perspective属性，达到相同的结果

但是，如果页面中有多个元素的时候，差异性就体现出来了。

在给父元素加perspective：800px；属性的时候，会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。

代码和示意图如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {perspective: 800px;      }div {width: 200px;height: 200px;background-color: red;float: left;margin: 50px 20px 0 0;transform: rotateY(-40deg);}</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

给父元素添加属性transform：perspective（800px）

在分别给子元素加transform：perspective（800px）；属性的时候，会以元素自身的某个点作为视点，所以呈现出的效果还是一样的。

代码和示意图如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {/*perspective: 800px;*/      }div {width: 200px;height: 200px;background-color: red;float: left;margin: 50px 20px 0 0;

            transform: perspective(800px) rotateY(-40deg)；}</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

给自身添加属性perspective：800px；

transform: perspective 和 perspective 的区别相关推荐

web基础·transform:rotate()搭配perspective实现3D旋转
perspective:透视:像素(单位) 3d变换需要透视,透视要加在观察元素的父盒子上 [透视的值越小会越明显] rotate():旋转:rotateX().rotateY().rotateZ ...
convert , transform , transfer , transmit ,transit 的区别
convert 是强调改变(某事物)的形式和用途比如:The sofa is converted into a bed The room was converted from a kitchen to ...
python agg函数_dataframe转化（二）之 apply(),transform(),agg() 的用法和区别
用法介绍 transform用法 pandas.Series.transform Call func on self producing a Series with transformed value ...
css3 3d perspective,CSS 3D transforms系列教程-Perspective
CSS 3D transforms的出现已经有好几年的历史了,但是由于缺乏浏览器的广泛支持,它一直没有得到广泛的应用.这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms. 要将一 ...
自学前端第二十二天:perspective视觉
CSS之perspective详解语法(实际开发都是给perspective: 1000px; perspective: number | none; 1.简单来说,就是设置这个属性后,那么,就可以 ...
transform-style和perspective属性的使用！
这是一篇关于transform-style和perspective属性的使用分享! transform-style属性 transform-style属性是3D空间中一个极为重要的属性,指定嵌套元素是 ...
景深（perspective）
简单的理解,景深就是我们的肉眼距离显示器的距离,景深越大,元素离我们越远,效果就不好,在我们CSS3中,perspective用于激活一个3D空间,属性值就是景深大小(默认none无景深) 应用景深的 ...
CSS3变形之Transform-style和Perspective等属性
transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现,它主要有两个属性值:flat和preserve-3d. 语法: tran ...
看图说话，详解perspective 和 preserve-3d
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 本文作者:安佳,360 搜索事业部的前端开发工程师,W3C CSS 工作组成员. 今天和大家分享两 ...

transform: perspective 和 perspective 的区别

给父元素的自身分别设置perspective属性，达到相同的结果

transform: perspective 和 perspective 的区别相关推荐

最新文章

热门文章