剪切图片:
例如:将平面图片变成正方体,则正方体前后左右四个面各自为图片的一部分
假设图片大小为:400*400;
(1)设置3D环境
transform-style: preserve-3d;
perspective(900px); 作用于元素的后代,而不是其元素本身
或transform:perspective(900px); 只对自身,每个子元素的透视点都相同
(2)获取每份剪切大小:图片宽度/份数
四个div宽度为100,分别作为图片的一部分
(3)进行剪切,每个div移动背景图位置,获取各自图片的内容
background-position位移图片
(4)进行拼接
方式一:通过改变形变点再旋转,只用计算形变点距离和角度,不用计算z轴的偏移量
先transform-origin: center center -200px; 移动形变点z轴的位置
通过rotateY(ndeg)
方式二:需要计算z轴的偏移量
先rotateY(ndeg),然后translateZ,旋转过后,xyz轴参照平面变成了旋转后的平面,而非屏幕
计算z轴偏移量,先进行各边旋转,旋转过后,按照xyz轴的方向,应该根据z轴的方向进行偏移指定距离到指定角度的方向,形成多边形
(5)进入立体图形内部的VR效果:
在每个背景div的父元素,即设置3D环境的元素,通过translateZ或perspective来拉近远视角,进入立体图形
拼接成八边形位移示意图:
假设每边400,则旋转后需要根据z轴平移200+200*根号2 的距离
旋转过后,xyz轴参照平面变成了旋转后的平面,而非屏幕示意图:
位移图形中点位置相同
.g-container {
width: 200px;
height: 200px;
background-color: red;
transform: rotateY(85deg) translateZ(200px); //旋转90deg过后,绕Z轴位移,此时z轴在原屏幕的x轴方向
}
.g-container2{
width: 200px;
height: 200px;
background-color: yellowgreen;
transform: translateX(200px); //未旋转,绕x轴平移
}
进入3D图形内部:
未进入前:
进入后:即在父元素通过translateZ拉近视角
类似效果图:
$imgCount : 4;
.container{
position:relative;
}
.stage{
position:relative;
width:800px;
height:400px;
margin:0 auto;
perspective:500px;
transform-style: preserve-3d;
.control{
position:relative;
width:100%;
height:100%;
transform-style: preserve-3d;
animation:rotate 40s linear infinite; //父元素设置视角距离
.imgWrap{
position:absolute;
width:400px;
height:400px;
top:50%;
left:50%;
transform:translate(-50%, -50%);
transform-style: preserve-3d;
.img{
position:absolute;
width:400px;
height:400px;
line-height:400px;
text-align:center;
font-size:120px;
top:0;
left:0;
transform-style: preserve-3d;
}
@for $i from 1 through $imgCount{ //计算多边形每个部分旋转角度和偏移量
.img#{$i}{
background:hsla($i * 30, 50%, $i * 20%, $i * 0.2);
transform: rotateY(35 + ($i * 90deg)) translateZ(200px) ;
}
}
}
}
}
@keyframes rotate{
0%{
transform: translateZ(-230px) rotateY(0deg) ;
}
50%{
transform: translateZ(-270px) rotateY(-360deg) ;
}
100%{
transform: translateZ(-250px) rotateY(-720deg);
}
}
//拉近视角距离,进入内部
@keyframes rotate{
0%{
transform: translateZ(-230px) rotateY(0deg) ;
}
50%{
transform: translateZ(-270px) rotateY(-360deg) ;
}
100%{
transform: translateZ(-250px) rotateY(-720deg);
}
}
<div class="container">
<!-- 舞台层 -->
<div class="stage">
<!-- 控制层 -->
<div class="control">
<!-- 图片层 -->
<div class="imgWrap">
<div class="img img1">3</div>
<div class="img img2">D</div>
<div class="img img3">视</div>
<div class="img img4">图</div>
</div>
</div>
</div>
</div>