css 3d 常用函数

父盒子经常添加的属性,添加后可以以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);
            }

你可能感兴趣的:(css,前端)