css:用css实现图片旋转轮播3d效果

「爱情、让人受尽委屈。」 2022-02-15 01:49 821阅读 1赞

## CSS3的transform-style: ##

:css3属性，在3d空间非常重要的一个属性，有两个值：

flat 子元素将不保留其 3D 位置，默认值。  
preserve-3d 子元素将保留其 3D 位置。  
要注意的是ie不支持  
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。  
效果显示[效果图][Link 1]  
思路：把六张图片放在一起，每张图片转换角度，角度自己调试，中间一张图片作为中心轴，然后添加动效果：  
代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				perspective: 1000px;
    			}
    			section{
    				width: 300px;
    				height: 200px;
    				margin: 100px auto;
    				background: url(img/coco.png) no-repeat;
    				background-size: cover;
    				position: relative;
    				transform-style: preserve-3d;//透视效果，一定要添加，不然会出现动画滚动是平面效果。
    				transition: all 10s linear;
    			}
    			section:hover{
    				transform: rotateY(360deg);
    			}
    			section div{
    				width: 100%;
    				height: 100%;
    				background: url(images/2.jpg) no-repeat;
    				-webkit-background-size: cover;
    				background-size: cover;
    				position: absolute;
    				top: 0;
    				left: 0;
    			}
    			section div:nth-child(1){
    				transform: rotateY(0deg) translateZ(400px);
    			}
    			section div:nth-child(2){
    				transform: rotateY(60deg) translateZ(400px);
    				background: url(images/3.jpg) no-repeat;
    				background-size: cover;
    			}
    			section div:nth-child(3){
    				transform: rotateY(120deg) translateZ(400px);
    				background: url(images/4.jpg);
    				background-size: cover;
    			}
    			section div:nth-child(4){
    				transform: rotateY(180deg) translateZ(400px);
    				background: url(images/5.jpg) no-repeat;
    				background-size: cover;
    			}
    			section div:nth-child(5){
    				transform: rotateY(260deg) translateZ(400px);
    				background: url(images/6.jpg) no-repeat;
    				background-size: cover;
    			}
    			section div:nth-child(6){
    				transform: rotateY(360deg) translateZ(400px);
    				background: url(images/1.jpg) no-repeat;
    				background-size: cover;
    			}
    			/*section div:nth-child(7){
    				transform: rotateY(360deg) translateZ(400px);
    				background: url(images/1.jpg) no-repeat;
    				background-size: cover;
    			}*/
    		</style>
    	</head>
    	<body>
    		<section>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			<div></div>
    			
    		</section>
    	</body>
    </html>

比较简单的代码。

[Link 1]: https://s17.aconvert.com/convert/p3r68-cdx67/ydz4u-a1igy.gif