1.transform-style 指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化
取值:flat | preserve-3d
- flat:默认值,指定子元素位于此元素所在平面内
- preserve-3d:指定子元素定位在三维空间内
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transform-style</title>
<style>
body {
perspective: 1000px;
}
.cube {
position: relative;
font-size: 80px;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
}
.cube > div {
position: absolute;
width: 2em;
height: 2em;
background: rgba(0, 0, 0, .3);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 2em;
}
.front {
transform: translateZ(1em);
}
.top {
transform: rotateX(90deg) translateZ(1em);
}
.right {
transform: rotateY(90deg) translateZ(1em);
}
.left {
transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
}
.back {
transform: rotateY(-180deg) translateZ(1em);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</body>
</html>
示例代码效果截图:
2.perspective 指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果
「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定。当该属性值为「非none」时,元素将会创建局部堆叠上下文。
取值:none | <length>
- none:不指定透视
- <length>:指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值
3.perspective-origin 指定透视点的位置
取值:[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
该属性提供2个参数值。如果提供两个,第一个用于横坐标,第二个用于纵坐标。如果只提供一个,该值将用于横坐标;纵坐标将默认为center。
(1)<percentage>:用百分比指定透视点坐标值,相对于元素宽度。可以为负值。
(2)<length>:用长度值指定透视点坐标值。可以为负值。
- left:指定透视点的横坐标为left
- center:指定透视点的横坐标为center
- right:指定透视点的横坐标为right
- top:指定透视点的纵坐标为top
- center:指定透视点的纵坐标为center
- bottom:指定透视点的纵坐标为bottom
4.backface-visibility 指定元素背面面向用户时是否可见
取值:visible | hidden
决定一个元素背面面向用户时是否可见,需要直接在该元素上定义 <' backface-visibility '> 属性,而不能在其父元素上,因为该属性默认为不可继承。
- visible:指定元素背面可见,允许显示正面的镜像
- hidden:指定元素背面不可见
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>backface-visibility</title>
<style>
body {
perspective: 800px;
perspective-origin: 50%;
}
.wrapper{
width: 500px;
margin:30px auto 0;
}
.cube {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
transform-style: preserve-3d;
animation: rotate 5s infinite;
}
.cube > div {
position: absolute;
width: 100%;
height: 100%;
border:1px #ff0 solid;
background-color: rgba(0, 0, 0, .3);
color: gray;
font-size: 40px;
line-height: 100px;
text-align: center;
color: #ff0;
font-family: Arial;
}
.front {
transform: translatez(50px);
}
.back {
transform: rotatey(180deg) translatez(50px);
}
.right {
transform: rotatey(90deg) translatez(50px);
}
.left {
transform: rotatey(-90deg) translatez(50px);
}
.top {
transform: rotatex(90deg) translatez(50px);
}
.bottom {
transform: rotatex(-90deg) translatez(50px);
}
@keyframes rotate {
from {
transform: rotatey(0);
}
to {
transform: rotatey(360deg);
}
}
.c1 > div {
backface-visibility: visible;
}
.c2 > div {
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div>
</div>
</div>
</body>
</html>
示例代码效果截图: