HTML 3D旋转特效,前端开发常用javascript特效_3D旋转

/p>

<

前端网页开发工具

*{

margin:0;

padding:0

}

body{

background:#222;

overflow:hidden;

user-select:none;

/*禁止选中*/

}

.perspective{

perspective:800px;

/*3d景深*/

}

.wrap{

transform-style:preserve-3d;

width:120px;

height:180px;

margin:100pxauto;

position:relative;

transform:rotateX(-10deg)rotateY(0deg);

}

.wrapimg{

display:block;

position:absolute;

width:100%;

height:100%;

transform:rotateY(0deg)translateZ(0px);

padding:10px;

background:transparent;

box-shadow:004px#fff;

/*水平位移 垂直位移 扩散程度 颜色*/

border-radius:5px;

/*圆角*/

-webkit-box-reflect:below5px-webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);

/*倒影 倒影模式 直径*/

}

.wrapp{

width:1200px;

height:1200px;

background:-webkit-radial-gradient(centercenter,600px600px,rgba(122,122,122,0.5),rgba(0,0,0,0));

position:absolute;

border-radius:50%;

left:50%;

top:100%;

margin-left:-600px;

margin-top:-600px;

transform:rotateX(90deg);

/*沿着x轴方向摁倒*/

}