1、3D空间与景深
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D空间与景深</title>
<style>
/*
变换原点
1.元素变换时，默认的原点是元素的中心，使用transform-orgin可以设置变换的原点
2.修改变换原点对位移没有影响，对旋转和缩放就会产生影响。
3.如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键词，则另一个坐标取50%
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 100px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(3deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">
</div>
</div>
</div>
</body>
</html>2、透视点位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D空间与景深</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>3、位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D位移</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
/* 默认值 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.726);
/* 设置z轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比 */
/* transform: translateZ(200px); */
transform: translate3d(100px,100px,200px);
box-shadow: 0px 0px 10px black;
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>4、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
/* 默认值 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.726);
/* transform: rotateX(-45deg); */
/* rotateX 设置x轴旋转角度，需指定一个角度值（deg）面对x轴正方向，正值顺时针，负值逆时针 */
/* transform: rotateY(35deg); */
/* 设置Y轴旋转角度，需指定一个角度值（deg），面对y轴正方向：正直顺时针，负值逆时针 */
/* rotate3D 前3个参数分别表示坐标轴：x，y，z，第4个参数表示旋转的角度，参数不允许省略。
例如：transform:rotate3D(1,1,1,30deg),意思是：x，y，z分别旋转30度;*/
/* transform: rotate3d(30deg,30deg); */
transform: rotate3d(1,1,1,30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>5、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D缩放</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
/* 默认值 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.726);
/* 125 */
/* transform: scaleZ(1) rotateY(45deg); */
transform: scale3d(1.5,1.5,4) rotateY(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>6、多重变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6、多重变换</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
/* 默认值 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.726);
/* 变换原点 */
/* transform: origin 202px 180px; */
/* transform: rotateY(-45deg); */
/* 多重变换时，建议最后旋转 */
transform: translateZ(100px) scaleZ(3) rotateY(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>7、背部可见性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7、背部可见性</title>
<style>
/*
通常情况下，我们不需要调整透视点位置
*/
.outer{
width: 200px;
height: 200px;
border: 2px solid black;
margin:0 auto ;
margin-top: 100px;
position: relative;
/* 开启3D空间 */
/* transform:flat;扁平化 */
/* perspective设置给发生3D变换元素的父元素 */
transform-style: preserve-3d;
/* 设置景深(有了透视效果，近大远小) */
perspective: 500px;
/* 设置透视点的位置 */
/* 默认值 */
perspective-origin: 102px 102px;
}
.son{
width: 200px;
height: 200px;
background-color: rgba(0, 191, 255, 0.726);
transform: rotateY(odeg);
/* 隐藏背部 */
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="outer">
<div class="son">你好啊</div>
</div>
</div>
</body>
</html>
评论 (0)