css3 水晶效果 |css3 相片酷炫特效

.crystal {
display: inline-block;
perspective: 1000px;
transform-style: preserve-3d;
}
.crystal span {
display: block;
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: center;
}
.crystal span:before,
.crystal span:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 1px rgba(0,0,0,.4);
transform-style: preserve-3d;
transform-origin: center center;
}
.crystal span:before {
transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg) translate3d(0,0,50px);
}
.crystal span:after {
transform: rotateX(-60deg) rotateY(-120deg) rotateZ(0deg) translate3d(0,0,50px);
}

在这个示例代码中，大家给一个元素添加了一个类名”crystal”，并在该元素内部添加两个元素。这两个元素分别是水晶的两个面，通过before和after伪元素实现。接下来就是对每个面进行设置，大家采用了rotateX、rortateY和translate3d等属性进行变换，使得两个面可以合成一个六面体的形状。同时，大家还用了perspective属性来指定观察者的距离，让六面体更加真实。

总之，使用CSS3的水晶效果可以为网页增添一份新鲜感，令其更吸引人。有了这个效果，您可以更好地展示网页内容，吸引用户。赶快试试吧！