CSS 旋转轮播图

认识preserve-3d


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>认识preserve-3dtitle>
	<style>
	body {
		perspective: 1000px;
	}
	div {
		width: 100px;
		height: 145px;
		border: 1px solid red;
		margin: 100px auto;
		transform: rotateY(30deg);
		transform-style: preserve-3d;/*  让父盒子里面的子盒子以3d效果显示 */
	}
	div img {
		transform: rotateY(30deg);
	}
	style>
head>
<body>
	<div>
	  <img src="../images/pk1.png"  width="100px" alt="">
	div>
body>
html>

CSS 旋转轮播图_第1张图片

旋转轮播图结构


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转轮播图title>
	<style>
	section {
		width: 300px;
		height: 200px;
		margin: 100px auto;
		background: url(../images/shu.gif) no-repeat;
		background-size: cover;
		position: relative;
	}
	section div {
		width: 100%;
		height: 100%;
		background: url(../images/hu.gif) no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
	}
	style>
head>
<body>
	<section>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	section>
body>
html>

CSS 旋转轮播图_第2张图片


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转轮播图title>
	<style>
	body {
		perspective: 1000px;
	}
	section {
		width: 300px;
		height: 200px;
		margin: 100px auto;
		background: url(../images/shu.gif) no-repeat;
		background-size: cover;
		position: relative;
		transform-style: preserve-3d;  /* 3d效果 */
		transition: all 10s linear;
	}
	section:hover {
		transform: rotateY(360deg);
	}
	section div {
		width: 100%;
		height: 100%;
		background: url(../images/hu.gif) no-repeat;
		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);
	}
	section div:nth-child(3) {
		transform: rotateY(120deg) translateZ(400px);
	}
	section div:nth-child(4) {
		transform: rotateY(180deg) translateZ(400px);
	}
	section div:nth-child(5) {
		transform: rotateY(240deg) translateZ(400px);
	}
	section div:nth-child(6) {
		transform: rotateY(300deg) translateZ(400px);
	}
	style>
head>
<body>
	<section>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	   <div>div>
	section>
body>
html>

CSS 旋转轮播图_第3张图片

你可能感兴趣的:(CSS 旋转轮播图)