1、perspective是什么
CSS3中的transform变换有rotateX/Y/Z三种3D变换，然而浏览器只能显示二维平面。为了让浏览器给人3D的感觉，于是perspective属性就出现了。想了解原理的，可以参看这篇文章
2、perspective怎么用
用法1：
假设html结构如下：
<div class="parent">
<div class="child-x">rotateX(30deg)</div>
<div class="child-y">rotateY(30deg)</div>
<div class="child-z">rotateZ(30deg)</div>
</div>
css如下：
.parent{
perspective: 300px;
width: 300px;
height: 600px;
border: 1px solid black;
}
.child-x{
transform: rotateX(30deg);
width: 200px;
height: 100px;
background-color: red;
}
.child-y{
transform: rotateY(30deg);
width: 200px;
height: 100px;
background-color: green;
}
.child-z{
transform: rotateZ(30deg);
width: 200px;
height: 100px;
background-color: blue;
}
结果就是这样：
结果.PNG
所以用法为：
1、在父元素上设置perspective
2、子元素设置rotateX/Y/Z
用法2：
直接作用在子元素上
.parent .child-x{
transform:perspective(600px) rotateX(45deg)
}
第一种用法是三个子元素公用一个视点，第二种用法是每个子元素都拥有一个视点
3、相关属性
- perspective-origin
设置视点的初始位置：默认值为50% 50%，即父元素或独立子元素中心 - transform-style: preserve-3d
preserve-3d表示启用3D视角，作用在父元素上，必不可少 - backface-visibility
backface-visibility:hidden;使视角中被遮挡的元素不可见（默认可见） -
translateZ
transform：rotateX(30deg) translateZ(100px);//一起使用
应用在子元素上可调整视角大小，如下图：
d=perspective
4、附个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{
width: 1100px;
height: 600px;
border: 1px solid red;
perspective: 1400px;
perspective-origin:0 0;
position: relative;
}
.wrap{
width: 200px;
height: 100px;
-webkit-transform-style: preserve-3d;
position: absolute;
top: 250px;
left: 400px;
}
.wrap img{
width: 200px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.wrap img:nth-child(1){
transform: rotateY(0deg) translateZ(400px);
}
.wrap img:nth-child(2){
transform: rotateY(40deg) translateZ(400px);
}
.wrap img:nth-child(3){
transform: rotateY(80deg) translateZ(400px);
}
.wrap img:nth-child(4){
transform: rotateY(120deg) translateZ(400px);
}
.wrap img:nth-child(5){
transform: rotateY(160deg) translateZ(400px);
}
.wrap img:nth-child(6){
transform: rotateY(200deg) translateZ(400px);
}
.wrap img:nth-child(7){
transform: rotateY(240deg) translateZ(400px);
}
.wrap img:nth-child(8){
transform: rotateY(280deg) translateZ(400px);
}
.wrap img:nth-child(9){
transform: rotateY(320deg) translateZ(400px);
}
</style>
</head>
<body>
<div class="parent">
<div class="wrap">
</div>
</div>
</body>
</html>
效果如下：
圆形轮播.PNG
网友评论