perspective
(1)perspective值越大,产生3D变换的时候会感觉距物体越远(不可为负数或者0,如果设置为0或者负数,那么就相当于人观察一个物体眼睛贴上去或者陷进去,就不会感觉到变化了)(也不能为百分比)
(2)一般为父元素设置perspective属性,设置完之后,如果其子元素设置了3D转换,那么就可以显示出来
具体效果看下面的rotate 3D变换
1,rotate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.demo{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0);
border: 2px solid #000;
transform: rotateX(0deg);
}
.content{
perspective: 240px;
margin: 50px;
width: 104px;
height: 104px;
background-color: rgba(0, 0, 255);
}
</style>
</head>
<body>
<div class="content">
<div class="demo"></div>
</div>
</body>
</html>
改变rotateX的值
改变rotateY的值
改变rotateZ的值
语法
rotate3d(x, y, z, angle)
x<number 类型> 表示旋转轴x坐标方向上的矢量(可以为小数)
y<number 类型> 表示旋转轴x坐标方向上的矢量(可以为小数)
z<number 类型> 表示旋转轴x坐标方向上的矢量(可以为小数)
angle旋转角度,允许负值
----------------------------------------------------------------
2,perspective-origin属性
观察位置:
语法:
perspective-origin: x, y;
默认值:perspective-origin: center, center;
x可填:left | center | right | 0% | 50% 100% | n px
y可填:top | center | bottom | 0% | 50% 100% | n px
在填像素的时候,相当的是 在x为left | 0% 和y为top | 0% 的位置
只有一个值的时候,默认第二个值为center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.demo{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0);
border: 2px solid #000;
transform: rotateX(40deg);
}
.content{
perspective: 240px;
perspective-origin: center center;
margin: 50px;
width: 104px;
height: 104px;
background-color: rgba(0, 0, 255);
}
</style>
</head>
<body>
<div class="content">
<div class="demo"></div>
</div>
</body>
</html>
我就不一一试过去了
3,translate3d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.demo{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0);
border: 2px solid #000;
transform: translate3d(0px, 0px, -100px);
}
.content{
perspective: 240px;
margin: 50px;
width: 104px;
height: 104px;
background-color: rgba(0, 0, 255);
}
</style>
</head>
<body>
<div class="content">
<div class="demo"></div>
</div>
</body>
</html>
设置上半透明
4,transform-origin
设置需要3D变换的元素的位置
x轴: left | center | right | <length> | <percentage>
y轴: top | center | bottom | <length> | <percentage>
z轴: <length>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.demo{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0);
border: 2px solid #000;
transform: rotate3d(1, 1, 1, 40deg);
transform-origin: center center 0px;
}
.content{
perspective: 240px;
margin: 50px;
width: 104px;
height: 104px;
background-color: rgba(0, 0, 255);
}
</style>
</head>
<body>
<div class="content">
<div class="demo"></div>
</div>
</body>
</html>
太多了 可以自己试一下
---------------------------------------------------------------
3D骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.content{
perspective-origin: center center;
margin: 300px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: my_rotate 3s infinite;
animation-direction: alternate;
/*Safari and Chrome*/
-webkit-animation: my_rotate 3s infinite;
--webkit-animation-direction: alternate;
}
@keyframes my_rotate {
from {
transform: rotate3d(1, 1, 1, 0deg);
} to {
transform: rotate3d(1, 1, 1, 360deg);
}
}
/*Safari and Chrome*/
@-webkit-keyframes my_rotate {
from {
transform: rotate3d(1, 1, 1, 0deg);
} to {
transform: rotate3d(1, 1, 1, 360deg);
}
}
.demo{
width: 200px;
height: 200px;
position: absolute;
color: white;
line-height: 200px;
text-align: center;
font-size: 30px;
}
#Bottom{
background-color: rgba(255, 105, 180, 0.5);
transform: rotateX(90deg);
transform-origin: bottom;
/*Safari and Chrome*/
-webkit-transform: rotateX(90deg);
-webkit-transform-origin: bottom;
}
#Left{
background-color: rgba(147, 112, 219, 0.5);
transform: rotateY(90deg);
transform-origin: left;
/*Safari and Chrome*/
-webkit-transform: rotateY(90deg);
-webkit-transform-origin: left;
}
#Top{
background-color: rgba(135, 206, 250, 0.5);
transform: rotateX(-90deg);
transform-origin: top;
/*Safari and Chrome*/
-webkit-transform: rotateX(-90deg);
-webkit-transform-origin: top;
}
#Front{
background-color: rgba(220, 220, 220, 0.5);
/*transform: rotateX(-90deg);*/
transform-origin: center center;
}
#Behind{
background-color: rgba(250, 128, 114, 0.5);
transform: translateZ(-200px);
transform-origin: right;
/*Safari and Chrome*/
-webkit-transform: translateZ(-200px);
-webkit-transform-origin: right;
}
#Right{
background-color: rgba(144, 238, 144, 0.5);
transform: rotateY(-90deg);
transform-origin: right;
/*Safari and Chrome*/
-webkit-transform: rotateY(-90deg);
-webkit-transform-origin: right;
}
</style>
</head>
<body>
<div class="content">
<div class="demo" id="Bottom">bottom</div>
<div class="demo" id="Left">left</div>
<div class="demo" id="Top">top</div>
<div class="demo" id="Front">front</div>
<div class="demo" id="Behind">behind</div>
<div class="demo" id="Right">right</div>
</div>
</body>
</html>
----------------------------------------------------------------
参考文章:
https://segmentfault.com/q/1010000007466275
https://www.cnblogs.com/xiaohuochai/p/5351477.html