How to achieve perspective effect using css

This article is just a simple test, its purpose is to inspire others. We don’t care about how practical this method is, but it can at least give us a way to solve the problem. Hope this article can be helpful to you.

I came up with an idea today, using css to achieve the perspective effect. At first, I thought of our common method of adding shadow effects, which is achieved by using multiple ps through offset, but this requires a lot of ps, which is not ideal. Then, I thought of a property of CSS: border, which can produce a diagonal effect at the junction of borders. This can be achieved with two p's. Let's look at the final effect first, and then analyze the implementation process.

First, let’s take a look at how the border generates the diagonal effect. Add the following code to the head of your html, and you will see such an effect.

.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;}

With the above foundation, we can use two additional ps to achieve the perspective effect.

1. The html code is as follows:

<p class="perspective-outer">
 <p class="perspective-r"></p>
 <p class="perspective-b"></p>
 <p class="perspective-inner">透视效果元素</p>
</p>

2. Css code:

.perspective-outer{
 position:relative;
 width:170px;/*要实现透视效果元素的宽度＋透视距离*/
 height:140px;/*要实现透视效果元素的高度＋透视距离*/
}
.perspective-inner{
 border:1px solid #f60;
 height:118px;
 width:148px;
 background-color:#fff;
}
.perspective-r,
.perspective-b{
 position:absolute;
 width:0;
 height:0;
}
.perspective-r{
 right:0;
 height:100px;/*要实现透视效果元素的高度(120px) - (border-top:20px)*/
 border-left:20px solid #000;/*右边透视距离*/
 border-top:20px solid #fff;/*下边透视距离*/
}
.perspective-b{
 bottom:0;
 width:150px;/*最外元素的宽度(170px) - border-left*/
 border-left:20px solid #fff;
 border-top:20px solid #000;
}

.perspective-outer defines the height and Width, and relative positioning to ensure that the perspective area on the right and bottom can be positioned at the corresponding position. The height value and width value are the height of the element to achieve the perspective effect plus the corresponding perspective distance. .perspective-r only needs to set the height value, and its value is the height of .perspective-outer minus border-top. .perspective-b only needs to set the width value, and its value is the width of .perspective-outer minus border-left. The width values ​​of border-top of .perspective-r and border-left of .perspective-b determine the perspective angle. The width values ​​of border-left of .perspective-r and border-top of .perspective-b determine the perspective distance. Among them, the color of border-top of .perspective-r and border-left of .perspective-b is the background color of the parent element. The parent element of my test page here is body, so it is white.

3. Postscript

This article is just a simple test, and its purpose is to inspire others. We don’t care about how practical this method is, but it can at least give us a way to solve the problem. Hope this article can be helpful to you.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use css3 to achieve the color gradient glow effect of the input input box

How to use CSS3 to create a simple 3d translucent cube picture

The above is the detailed content of How to achieve perspective effect using css. For more information, please follow other related articles on the PHP Chinese website!