CSS3系列之3D制作再研究

Posted 2020-08-04 最骚的就是你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3系列之3D制作再研究相关的知识，希望对你有一定的参考价值。

水平翻转效果：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.stage {
				width: 140px;
				height: 200px;
				perspective: 800px;
			}
			
			.container {
				position: relative;
				width: 140px;
				height: 200px;
				transform-style: preserve-3d;
				transition: 1s;
			}
			
			.front {
				position: absolute;
				width: 140px;
				height: 200px;
        		background-image: url(img/3tb_160824110159262h572240.jpg);
				background-size: cover;
				backface-visibility: hidden;
			}
			
			.back {
				position: absolute;
				width: 140px;
				height: 200px;
				background-image: url(img/3tb_160824110159xh65572240.jpg);
				background-size: cover;
				transform: rotateY(180deg);
				backface-visibility: hidden;
			}
			
			.stage:hover .container {
				transform: rotateY(180deg);
			}
		</style>
	</head>

	<body>
		<div class=‘stage‘>
			<div class=‘container‘>
				<div class=‘front‘></div>
				<div class=‘back‘></div>
			</div>
		</div>
	 
	 
	</body>
</html>

　3D 旋转：

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

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wrap {
				padding: 50px;
			}
			
			.stage {
				width: 100px;
				height: 100px;
				-webkit-perspective: 2000px;
				perspective: 2000px;
				list-style: none;
			}
			
			.container {
				position: relative;
				width: 100px;
				height: 100px;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
				-webkit-transition: 1s;
				transition: 1s;
			}
			
			.front {
				position: absolute;
				width: 100px;
				height: 100px;
				-webkit-transform: translateZ(50px);
				transform: translateZ(50px);
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			
			.front img {
				width: 100%;
				height: 100%;
			}
			
			.back {
				position: absolute;
				display: block;
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				-webkit-transform: rotateY(90deg) translateZ(50px);
				transform: rotateY(90deg) translateZ(50px);
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			
			li:nth-child(1) .back {
				background-color: skyblue;
			}
			
			li:nth-child(2) .back {
				background-color: pink;
			}
			
			li:nth-child(3) .back {
				background-color: lightyellow;
			}
			
			.container:hover {
				-webkit-transform: rotateY(-90deg);
				transform: rotateY(-90deg);
			}
		</style>
	</head>

	<body>
		<ul class="wrap">
			<li class="stage">
				<div class=‘container‘>
					<div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div>
					<p class="back">帅气的胡歌</p>
				</div>
			</li>
			<li class="stage">
				<div class=‘container‘>
					<div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div>
					<p class="back">美腻的赵丽颖</p>
				</div>
			</li>
			<li class="stage">
				<div class=‘container‘>
					<div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div>
					<p class="back">清纯的刘亦菲</p>
				</div>
			</li>
		</ul>
	</body>

</html>

以上是关于CSS3系列之3D制作再研究的主要内容，如果未能解决你的问题，请参考以下文章

使用CSS3实现一个3D相册

奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

CSS3实现炫酷游戏3D翻转动画制作

CSS3动画之3D旋转

css3系列之transform scale

CSS3进阶：酷炫的3D旋转透视

CSS3系列之3D制作 再研究

CSS3系列之3D制作再研究