HTML 3D旋转特效,前端开发常用javascript特效_3D旋转
Posted weixin_39890543
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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轴方向摁倒*/
}
以上是关于HTML 3D旋转特效,前端开发常用javascript特效_3D旋转的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️
一个简单炫酷的前端小项目（html+css+js）----3D图片演示