CSS3D旋转木马效果+图片倒影特效

本文主要是介绍CSS3D旋转木马效果+图片倒影特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS3D效果图片倒影特效

预览

在这里插入图片描述

实现原理

主要应用到的属性是CSS3的3d视图（这个在前期的动画学习中有提到过，大家可以点开本专栏中的其他特效来看看！）和动画以及倒影特效属性：box-reflect
以下是倒影特效属性的属性值

direction 定义方向，取值包括 above 、 below 、 left 、 right。
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边
offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。
取值：
none：无遮罩图像。
linear-gradient：使用线性渐变创建遮罩图像。
radial-gradient：使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。
repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D照片墙</title><style>html,body {background: #000;}.container {position: relative;}.stage {position: relative;width: 800px;height: 240px;margin: 10% auto;perspective: 2000px;transform-style: preserve-3d;-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));}.stage .control {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);animation: rotate 30s linear infinite;}.stage .control .imgWrap {position: absolute;width: 400px;height: 400px;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-style: preserve-3d;}.stage .control .imgWrap .img {position: absolute;width: 500px;height: 400px;line-height: 400px;text-align: center;font-size: 120px;top: 0;left: 0;transform-style: preserve-3d;transform-origin: 50% 50% 0px;}.stage .control .imgWrap img {width: 100%;height: 100%;object-fit: cover;}.stage .control .imgWrap .img1 {transform: rotateY(80deg) translateZ(650px);}.stage .control .imgWrap .img2 {transform: rotateY(125deg) translateZ(650px);}.stage .control .imgWrap .img3 {transform: rotateY(170deg) translateZ(650px);}.stage .control .imgWrap .img4 {transform: rotateY(215deg) translateZ(650px);}.stage .control .imgWrap .img5 {transform: rotateY(260deg) translateZ(650px);}.stage .control .imgWrap .img6 {transform: rotateY(305deg) translateZ(650px);}.stage .control .imgWrap .img7 {transform: rotateY(350deg) translateZ(650px);}.stage .control .imgWrap .img8 {transform: rotateY(395deg) translateZ(650px);}@keyframes rotate {0% {transform: translateZ(-2000px) rotateY(0deg);}50% {transform: translateZ(-2000px) rotateY(-360deg);}100% {transform: translateZ(-2000px) rotateY(-720deg);}}</style>
</head><body><div class="container"><div class="stage"><div class="control"><div class="imgWrap"><div class="img img1"><img src="https://img0.baidu.com/it/u=2948507730,366864743&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"></div><div class="img img2"><img src="https://img0.baidu.com/it/u=3497736752,3489380243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"></div><div class="img img3"><img src="https://img1.baidu.com/it/u=4176596244,2087050683&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"></div><div class="img img4"><img src="https://img1.baidu.com/it/u=101343263,2767669969&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"></div><div class="img img5"><img src="https://img2.baidu.com/it/u=4101108356,2385848699&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"></div><div class="img img6"><img src="https://img2.baidu.com/it/u=3184536438,1657368344&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=411"></div><div class="img img7"><img src="https://img0.baidu.com/it/u=3641792508,719781706&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"></div><div class="img img8"><img src="https://img2.baidu.com/it/u=2645719931,682188402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"></div></div></div></div></div>
</body></html>