HTML+CSS制作3D旋转

最新推荐文章于 2024-01-23 09:24:54 发布

木子李双木霖

最新推荐文章于 2024-01-23 09:24:54 发布

阅读量501

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Y_web/article/details/119411533

版权

1.效果图如下：

2.结构

3.代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D旋转</title>
    <style type="text/css">
        *{padding: 0;
        margin: 0;}
        body,html{height:100%;}
        body{background-image: url("//‘背景图片’");background-size: 100% 100%;}
        #box{width: 280px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(0deg) rotateY(0deg);
            animation: go 45s linear infinite;
           }
        #box img{width: 280px;
                 height: 400px;
                 position: absolute;
                 left: 0;
                 top: 0;
        }
        #box img:nth-child(1){
            transform: rotateY(0deg) translateZ(650px);}
        #box img:nth-child(2){
            transform: rotateY(36deg) translateZ(650px);}
        #box img:nth-child(3){
            transform: rotateY(72deg) translateZ(650px);}
        #box img:nth-child(4){
            transform: rotateY(108deg) translateZ(650px);}
        #box img:nth-child(5){
            transform: rotateY(144deg) translateZ(650px);}
        #box img:nth-child(6){
            transform: rotateY(180deg) translateZ(650px);}
        #box img:nth-child(7){
            transform: rotateY(216deg) translateZ(650px);}
        #box img:nth-child(8){
            transform: rotateY(252deg) translateZ(650px);}
        #box img:nth-child(9){
            transform: rotateY(288deg) translateZ(650px);}
        #box img:nth-child(10){
            transform: rotateY(324deg) translateZ(650px);}
		@keyframes go {
		    0%{transform: rotateX(0deg) rotateY(0deg);}
		    25%{transform: rotateX(20deg) rotateY(180deg);}
		    50%{transform: rotateX(0deg) rotateY(360deg);}
		    75%{transform: rotateX(-20deg) rotateY(540deg);}
		    100%{transform: rotateX(0deg) rotateY(720deg);}
		
		}
    </style>
</head>
	<body>
		<div id="box">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		    <img src="图片">
		</div>
	</body>
</html>

木子李双木霖

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS制作3D旋转

1.效果图如下：2.结构3.代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>3D旋转</title> <style type="text/css"> *{padding: 0; margin: 0;} body,html{height:100%;}
复制链接

扫一扫