旋转的相册(css3旋转动画)

动画

图片路径点这里

代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css" media="screen">
		div{
      
			width: 250px;
			height: 170px;
			border: 1px solid pink;
			margin: 200px auto;
			position: relative;
		}
		div img{
      
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			transition: all 0.6s;
			transform-origin: top right; 
		}
		div:hover img:nth-child(1){
      
			transform: rotate(60deg);
		}
		div:hover img:nth-child(2){
      
			transform: rotate(120deg);
		}div:hover img:nth-child(3){
      
			transform: rotate(180deg);
		}div:hover img:nth-child(4){
      
			transform: rotate(240deg);
		}div:hover img:nth-child(5){
      
			transform: rotate(300deg);
		}div:hover img:nth-child(6){
      
			transform: rotate(360deg);
		}
	style>
head>
<body>
	<div>
		<img src="images/6.jpg" alt="">
		<img src="images/5.jpg" alt="">
		<img src="images/4.jpg" alt="">
		<img src="images/3.jpg" alt="">
		<img src="images/2.jpg" alt="">
		<img src="images/1.jpg" alt="">
	div>
body>
html>

你可能感兴趣的:(#,HTML,前端学习,css)