CSS3 旋转动画 添加了鼠标移入移出事件

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<body>
		<div class="box">
			<transition name="toggle">
				<div>
					<div class="cube">
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
					</div>
				</div>
			</transition>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
	<script>
		let vm = new Vue({
			el: '.box',
			data: {}
		});
	</script>
	<style>
		.box {
			width: 200px;
			margin: 200px auto;
			perspective: 800px;
		}

		.cube {
			width: 200px;
			height: 200px;
			transform-style: preserve-3d;
			transform: rotateY(0deg);
			transition: 2s;
			position: relative;
		}

		.cube div {
			width: 200px;
			height: 200px;
			position: absolute;
			text-align: center;
			line-height: 200px;
			font-size: 30px;
			border: 2px solid pink;
			opacity: 0.5;
		}

		.cube div:nth-child(1) {
			transform: rotateX(90deg) translateZ(102px);
			background: red;
		}

		/*第一个子盒子 与 第二个 为对立面*/

		.cube div:nth-child(2) {
			transform: rotateX(-90deg) translateZ(102px);
			background: yellow;
		}

		/*第二个子盒子*/

		.cube div:nth-child(3) {
			transform: translateZ(102px);
			background: blue;
		}

		/*第三个子盒子 与 第四个 为对立面*/

		.cube div:nth-child(4) {
			transform: translateZ(-102px);
			background: green;
		}

		/*第四个子盒子*/

		.cube div:nth-child(5) {
			transform: rotateY(90deg) translateZ(102px);
			background: purple;
		}

		/*第五个子盒子 与 第六个 为对立面*/

		.cube div:nth-child(6) {
			transform: rotateY(-90deg) translateZ(102px);
			background: orange;
		}

		/*第六个子盒子*/

		.cube:hover {
			transform: rotateX(360deg) rotateY(360deg);
		}

		/*划过时 转动*/

		.toggle-enter {
			opacity: 0;
		}

		.toggle-enter-active {
			transition: all 2s;
		}

		.toggle-leave-active {
			transition: all 2s;
		}

		.toggle-leave-to {
			opacity: 0;
		}
	</style>

</html>

你可能感兴趣的:(CSS3 旋转动画 添加了鼠标移入移出事件)