父盒子经常添加的属性,添加后可以以3D视角观看; 值越大可观察的视图越小
.box{
perspective: 1200px;
}
父盒子经常添加的属性,添加后保存3D视图。 当子盒子使用3D情况后,操作父盒子时,子盒子依旧以3D视角进行旋转等操作
.box{
transform-style: preserve-3d;
}
设置过渡时间, all 是代表所有变形效果均可以以该时间进行过渡
.box{
transition: all 1.5s;
}
设置旋转轴以及角度
.box>div{
transform: rotateX(90deg)
}
设置多个变化效果
.box>div{
transform: rotateX(270deg) translateY(-50px) translateZ(-50px);
}