【CSS】transition图片旋转案例-6张图片旋转特效

 
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>旋转练习title>
    	<style type="text/css">
    	/*  S = 样式设置  */
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		div {
    			width: 450px;
    			height: 300px;
    			border: 1px solid skyblue;
    			margin: 250px auto;
    			position: relative;  /*子绝父相*/
    		}
    	/*  E = 样式设置  */
    		div img {
    			width: 100%; /*宽、高均设置100%是为了让图片刚好完全在盒子里*/
    			height: 100%;
    			position: absolute;
    			transform-origin: left bottom; /*设置图片旋转的中心点为左下角*/
    			transition: all 0.5s; /*设置旋转的过渡效果:所有都过渡 过渡所需时间为0.5秒*/
    		}
    		div:hover img:nth-child(1) { 
    			transform: rotate(60deg); /*设置当鼠标经过盒子时第一个img的旋转角度为60°*/
    		}
    		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="../img/cqz-6.jpg" alt="" title="">
    		<img src="../img/cqz-5.jpg" alt="" title="">
    		<img src="../img/cqz-4.jpg" alt="" title="">
    		<img src="../img/cqz-3.jpg" alt="" title="">
    		<img src="../img/cqz-2.jpg" alt="" title="">
    		<img src="../img/cqz-1.jpg" alt="" title="">
    	div>
    body>
    html>

效果图如下:

你可能感兴趣的:(css)