html 结合3d效果,3D效果-HTML+CSS

本文使用图片均为500px*500px

如图

代码如下：

*{

padding: 0px;

margin: 0px;

}

body {

height: 100%;

width: 100%;

}

#leftDiv {

margin:50px auto;

width: 100%;

height: 500px;

-webkit-perspective: 800;

-moz-perspective: 800;

-moz-perspective-origin: 50% 50%;

}

#stage {

width: 100%;

height: 100%;

-webkit-perspective: 800; /*Z轴呈现距离*/

-moz-perspective: 800;

-webkit-perspective-origin: 100% 50%; /*Z轴固定时 x 和 y的呈现方式 默认在元素平面的中心50% 50%*/

-moz-perspective-origin: 50% 50%;

-webkit-transform-style: preserve-3d; /*3D呈现*/

-moz-transform-style: preserve-3d;

-webkit-transition: -webkit-transform 2s;

-moz-transition: -webkit-transform 2s;

}

#shape {

position: relative;

top: 160px;

margin: 0 auto;

height: 200px;

width: 200px;

-webkit-transform-style: preserve-3d; /*3D形式呈现*/

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.plane {

position: absolute;

left: 0;

top: 0;

height: 200px;

width: 200px;

border: 1px solid white;

/*-webkit-border-radius: 50px;

-moz-border-radius: 50px;

border-radius: 50px;*/

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

text-align: center;

font-family: Times, serif;

font-size: 14px;

color: black;

background-color: rgba(67, 181, 180, 0.60);

-webkit-transition: -webkit-transform 2s, opacity 2s;

-moz-transition: -webkit-transform 2s, opacity 2s;

-webkit-backface-visibility: visible; /*是否呈现元素的背面*/

-moz-backface-visibility: visible;

}

.one {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px); /*3D变化遵循先后顺序 如果是多次变化需要按照 后面的需要根据前一次变化的结果再重新定义*/

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);

}

.two {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);

}

.three {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);

}

.four {

opacity: 0.5;

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);

}

.five {

opacity: 0.5;

/*-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);*/

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(-100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(-100px);

}

.six {

opacity: 0.5;

/*-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);*/

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(-100px);

-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(-100px);

}

#shape img {

width: 200px;

height: 200px;

/*border-radius: 50px;*/

}

#shape.backfaces .plane {

-webkit-backface-visibility: visible;

/*-webkit-backface-visibility: visible;*/

-moz-backface-visibility: visible;

}

.cddd {

-webkit-animation: spin 7s infinite linear;

-moz-animation: spin 7s infinite linear;

}

@-webkit-keyframes spin {

from {

-webkit-transform: rotateX(0) rotateY(0);

-moz-transform: rotateX(0) rotateY(0);

}

to {

-webkit-transform: rotateX(360deg) rotateY(360deg);

-moz-transform: rotateX(360deg)rotateY(360deg);

}

}