CSS3太极旋转图与3D旋转图片

最新推荐文章于 2022-09-23 15:54:26 发布

阿东O

最新推荐文章于 2022-09-23 15:54:26 发布

阅读量200

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_45667438/article/details/120454719

版权

1.太极旋转图

<style type="text/css">
			main{
				width: 300px;
				height: 150px;
				background-color: #000000;
				border-radius: 300px 300px 0 0;
				position: relative;
				animation: move 1s linear infinite;
				transform-origin: bottom;
			}
			div{
				width: 150px;
				height: 150px;
				background-color: #fff;
				border-radius: 50%;
				position: absolute;
				top: 75px;
			}
			span{
				display: block;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: black;
				margin:50px auto;
			}
			div:nth-of-type(2){
				left:150px;
				background-color: black;
			}
			div:nth-of-type(2)>span{
				background-color: #fff;
			}
			@keyframes move{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
		</style>

<body>
	<main>
		<div>
			<span></span>
		</div>
		<div>
			<span></span>
		</div>
	</main>
</body>

2.3D旋转图片

<style type="text/css">
			body{
				background-color: skyblue;
			}
			div{	
														/*设置整个div容器的宽高
															防止旋转圆心偏移
																* */
				width:300px;
				height: 200px;				
				position: relative;					/*把div进行定位在页面的中心*/
				margin: 100px auto;
				transform-style: preserve-3d;			/*设置子元素中存在3D效果*/
				animation: move 30s infinite linear;
				
			}
			img{
				width: 300px;								/*统一图片的大小*/
				height: 200px;
				position: absolute;							/*绝对定位 相当于把四张图片叠在 
                                                                     一起*/
			}
			img:nth-of-type(1){
				transform: rotateY(90deg) translateZ(200px);		/*先选择不同的度数，对            
                                                               应的Z轴发生变化*/
			}
			img:nth-of-type(2){
				transform: rotateY(180deg) translateZ(200px);
			}
			img:nth-of-type(3){
				transform: rotateY(270deg) translateZ(200px);
			}
			img:nth-of-type(4){
				transform: rotateY(360deg) translateZ(200px);
			}
		
			@keyframes move{
				from{transform: rotateY(0deg);}
				to{transform: rotateY(720deg);}
			}
	

		</style>
<body>
		<div>
			<img src="img/1.jpg" >
			<img src="img/2.jpg" >
			<img src="img/3.jpg" >
			<img src="img/4.jpg" >	
		</div>
	
	</body>