一、位移
1.原理: 使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
2.空间: 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
3.语法:
1.transform: translate3d(x, y, z);
2.transform: translateX(值);
3.transform: translateY(值);
4.transform: translateZ(值);
4.取值:
1.正负均可
2.像素单位数值
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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* /* 透视:调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然.
透视值推荐值 800-1200px;
透视要给父元素添加
近大远小,近实远虚,Z轴需要添加透视 */
perspective: 800px;
/* 透视和3D没有关系,只是为了看Z轴 */
}
.box{
width: 200px;
height: 200px;
background-color: pink;
}
body:hover .box{
/* 3d位移 单独写法 */
/* x轴:上负 下正 */
transform: translateX(100px);
transform: translateX(-100px);
/* Y轴:上负 下正 */
transform: translateY(100px);
transform: translateY(-100px);
/* Z轴:正值是面向自己,负值是自己的反方向 */
transform: translateZ(100px);
transform: translateZ(-100px);
/* 3D位移的连写 */
/* transform: translate3d(X轴,Y轴,Z轴); */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、透视
1.原理: 使用perspective属性实现透视效果。
2.属性:(添加给父级)perspective: 值;透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
3.取值: 像素单位数值, 数值一般在800 – 1200。
4.作用:
(1)空间转换时,为元素添加近大远小、近实远虚的视觉效果;
(2)调整眼睛到屏幕的距离;透视的值越小,眼睛到屏幕的距离就越小,看到的值就越大.反之亦然;
(3)透视值推荐值 800-1200px;透视要给父元素添加;
(4)近大远小,近实远虚,Z轴需要添加透视;
(5)透视和3D没有关系,只是为了看Z轴。
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>
body{
perspective: 800px;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
transition: all 2s;
}
body:hover .box{
transform: translateZ(500px);
background-color: aqua
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、旋转
1.原理: 使用rotate实现元素空间旋转效果。
2.语法:
(1)transform: rotateZ(值);
(2)transform: rotateX(值);
(3)transform: rotateY(值);
(4)连写:rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度。x,y,z 取值为0和1,0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转。
(5)X轴正值是从上往下旋转,负值是从下往上旋转;
(6)Y轴正值是从左往右旋转,负值是从右往左旋转;
(7)Z轴正值是顺时针旋转,负值是逆时针旋转。
<!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>
.box{
position: relative;
width: 500px;
height: 400px;
background-color: pink;
margin: 100px auto;
}
.box img{
width: 500px;
height: 400px;
transition: all 2s;
}
.box:hover img{
/* 3d x轴:rotate 单位: deg度 turn圈 */
/* X轴正值是从上往下旋转,负值是从下往上旋转 */
/* transform: rotateX(180deg); */
/* Y轴正值是从左往右旋转,负值是从右往左旋转 */
/* transform: rotateY(180deg); */
/* Z轴正值是顺时针旋转,负值是逆时针旋转 */
/* transform: rotateZ(180deg); */
/* 旋转的综合写法 transform: rotate3d(X,Y,Z,角度);
x,y,z的取值范围是0和1;
0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转*/
transform: rotate3d(0,1,1,45deg);
/* 仅了解 */
}
</style>
</head>
<body>
<div class="box">
<img src="../2.素材/hero.jpeg" alt="">
</div>
</body>
</html>
左手法则:
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。
<!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>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 200px;
height: 200px;
/* background-color: pink; */
margin: 100px auto;
/* 开启3d */
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover{
transform: rotateY(180deg);
}
.box div{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: aqua;
}
.box .two{
transform: translateZ(-100px);
background-color: blueviolet;
}
.box .one {
transform: translateZ(100px);
}
</style>
<!-- 1.把三个盒子层叠在一起,使用定位-子绝父相;
2.通过位移使盒子发生间隔;
3.开启3d环境(推荐给父盒子);
4.给父盒子添加向y轴的旋转方向; -->
</head>
<body>
<div class="box">
<div class="one">前面</div>
<div class="two">后面</div>
</div>
</body>
</html>
四、立体呈现
1.原理: 使用transform-style: preserve-3d呈现立体图形。
2.呈现立体图形步骤
(1)盒子父元素添加transform-style: preserve-3d;
(2)按需求设置子盒子的位置(位移或旋转);
(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>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
width: 1200px;
margin: 100px auto;
}
ul li{
position: relative;
width: 120px;
height: 40px;
/* background-color: pink; */
transform-style: preserve-3d;
transition: all 1s;
}
ul li:hover{
transform: rotateX(-90deg);
}
ul li span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
}
ul li span:first-child{
background-color: greenyellow;
transform: translateZ(20px);
}
ul li span:last-child{
background-color: aqua;
transform: translateY(-20px) rotateX(90deg);
}
</style>
<!-- 1.首页用父相子绝的定位,使两个盒子叠在一起;
2.把绿色的盒子往前移动父盒子的一半;(隔开距离)
3.给推荐父元素添加3d效果;(transform-style:preserve-3d)
4.给父盒子添加x轴旋转90度;
5.给天蓝色盒子旋转90度;
6.给天蓝色盒子往上y轴位移绿色盒子高度的一半;
-->
</head>
<body>
<ul>
<li>
<span>首页</span>
<span>index</span>
</li>
</ul>
</body>
</html>
五、缩放
1.原理: 使用scale实现空间缩放效果。
2.语法:
(1)transform: scaleX(倍数);(scaleX可以理解为盒子的宽)
(2)transform: scaleY(倍数);(scaleY可以理解为盒子的高)
(3)transform: scaleZ(倍数);(scaleZ可以理解为面向自己的方向在进行放大,需要把盒子进行旋转)文章来源:https://www.toymoban.com/news/detail-796080.html
(4)连写:transform: scale3d(x, y, z);(连写 transform: scale3d(X,Y,Z);值为倍数)文章来源地址https://www.toymoban.com/news/detail-796080.html
<!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>
body{
perspective: 1000px;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 200px auto;
transition: all 2s;
}
.box:hover{
/* scaleX可以理解为盒子的宽 */
transform: scaleX(2);
/* scaleY可以理解为盒子的高 */
transform: scaleY(2);
/* scaleZ 可以理解为面向自己的方向在进行放大,需要把盒子进行旋转 */
transform: scaleZ(10) rotateX(90deg);
/* 连写 transform: scale3d(X,Y,Z);值为倍数*/
transform: scale3d(2,2,2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
到了这里,关于transform 平面转换(3d)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!