html 实现3d效果代码,使用纯CSS实现3D旋转效果的示例代码

主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果

效果

HTML代码

前面

背面

为了演示效果，将元素居中，body的css设置

*{

margin: 0;

padding: 0;

}

body{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: #333;

}

box 属性设置

.box{

width: 300px;

height: 400px;

transform-style: preserve-3d;

position: relative;

}

.face{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

transform-style: preserve-3d;

display: flex;

justify-content: center;

align-items: center;

backface-visibility: hidden;

transition: 2s ease-in-out;

transform: perspective(500px) rotateY(0deg);

}

前面属性设置

.face.front{

background: #ff0;

}

背面属性设置,在Y轴旋转 180度,先不显示

.face.back{

background: #3bc2ff;

color: #fff;

transform: perspective(500px) rotateY(180deg);

}

设置悬浮的动画效果

.box:hover .face.front{

transform: perspective(500px) rotateY(180deg);

}

.box:hover .face.back{

transform: perspective(500px) rotateY(360deg);

}

设置文字的悬浮效果

.box .face h2{

font-size: 4em;

text-transform: uppercase;

transform: perspective(500px) translateZ(50px);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。