Html及CSS实现旋转效果

Html及CSS实现旋转效果


<html>
	<head>
		<meta charset="utf-8">
		<title>旋转title>
		<style type="text/css">
			.box{
				margin:200px auto;
				width: 500px;
				position: relative;
				transition: all 2s linear;
				transform-style: preserve-3d;
				perspective: 1000px;
			}
			.box:hover{
				transform: rotateY(180deg);
			}
			.text1,.text2{
				position: absolute;
				top:0px;
				left: 0px;
				width: 500px;
				height: 500px;
				border-radius: 50%;
				text-align: center;
				line-height: 500px;
				font-size: 60px;
			}
			.text1{
				z-index: 1;
				background-color: blue;
			}
			.text2{
				background-color: red;
				transform: rotateY(180deg);
			}
		style>
	head>
	<body>
		<form>
			<div class="box">
				<div class="text1">无奋斗div>
				<div class="text2">不青春div>
			div>
		form>
	body>
html>

鼠标触及盒子,盒子自行旋转。

你可能感兴趣的:(html5,css3)