css3 3d转换
Posted 前端小白学习
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 3d转换相关的知识,希望对你有一定的参考价值。
3d转换
如果想要元素具备3d效果,则需要使其父元素变成一个3d空间
parent {
transform-style: preserve-3d;
perspective: 500px; // 视距
}
设置的perspective的值不会影响元素的初始的大小,但是会影响3d变化时的一个状态
但是会影响,元素改变后的状态
简单案例
div {
width: 100px;
height: 100px;
background: #000;
margin: 0 auto;
}
body {
transform-style: preserve-3d;
perspective: 400px;
}
.box{
transform: rotateX(45deg);
}
<div></div>
<div class="box"></div>
页面效果
另一个
.box {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 200px;
}
.item {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 100px;
font-size: 36px;
color: #fff;
background: rgba(0,0,0,.3);
}
.item:first-child {
transform: translate3d(0, 0, -50px);
text-align: left;
}
.item:last-child {
transform: translate3d(0, 0, 50px);
text-align: right;
}
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
页面效果
translate3d
transform: translate3d(x, y, z)
transform: translateX()
translateY()
translateZ()
平时如果想要使用平移效果,那么尽量使用transform: translate3d()
因为translate3d会强制开启GPU渲染。性能比2d的更好
translate3d(x, y, z)
rotate3d
rotateX
rotateY
rotateZ
和rotate效果相同
rotate3d(x, y, z, deg)
x y z为三个矢量,矢量方向为对应坐标轴方向
如果xyz为正值则是正方向
如果xyz为负值则是负方向
三个方向上的三个值可以确定一条合成的方向
以该方向为一条线 让元素在这条线上进行旋转对应的角度
例子
body {
transform-style: preserve-3d;
perspective: 400px;
}
div {
width: 100px;
height: 100px;
background: black;
margin: 100px auto;
transform: rotate3d(1, 1, 1, 45deg);
}
html
<div></div>
页面效果
scale3d
scale3d(x, y, z)
如果多个元素(祖先后代)都需要是3d效果,则都需要添加
transform-style: preserve-3d;
但是只需要给最上层元素添加视距
灭点位置 perspective-origin
当景物离自己的位置越远时,就会越趋于集中到某一个点上。这个点就是灭点
比如,一条笔直的公路,你的视线看过去公路胡越来越细
来源百度图片
实现一个立方体
代码实现
body {
transform-style: preserve-3d;
perspective: 500px;
/* 调整灭点位置 */
perspective-origin: center center;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear;
/* transform-origin: left center -100px; */
/* transform: scaleZ(2) */
}
.item {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: rgba(0,0,0,.3);
color: #fff;
font-size: 72px;
text-align: center;
line-height: 200px;
box-sizing: border-box;
border: 1px solid #000;
}
.item1 {
transform: rotateX(90deg) translateZ(100px);
/* x轴向上旋转90度 ,z轴正方向移动100px*/
}
.item2 {
transform: rotateX(-90deg) translateZ(100px);
}
.item3 {
transform: rotateY(-90deg) translateZ(100px);
}
.item4 {
transform: rotateY(90deg) translateZ(100px);
}
.item5 {
transform: translateZ(100px);
}
.item6 {
transform: rotateY(180deg) translateZ(100px);
}
@keyframes rotate {
100% {
transform: rotate3d(-1,1,1,360deg);
}
}
<div class="box">
<div class="item item1">上</div>
<div class="item item2">下</div>
<div class="item item3">左</div>
<div class="item item4">右</div>
<div class="item item5">前</div>
<div class="item item6">后</div>
</div>
页面展示
看不懂的强烈推荐看下张鑫旭的css3 3d转换,很清楚
以上是关于css3 3d转换的主要内容,如果未能解决你的问题,请参考以下文章