transform之筛子

最新推荐文章于 2020-05-19 17:46:58 发布

小青龙8085

最新推荐文章于 2020-05-19 17:46:58 发布

阅读量183

点赞数 1

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104110495

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			body{
				perspective: 800px;/*视角距离*/
				perspective-origin: 50%;/*视角位置*/
			}
			.sieve{
				width: 100px;
				height: 100px;
				display: inline-block;
				margin: 50px;
				transform-style: preserve-3d;/*有3d感，在transform3d中使用*/
			}
			.sieve> div { 
				position: absolute;/*使六个面都在同一位置*/
				
				width: 100%;
				height: 100%;
				color: gray;
				background: rgba(255,255,255,0.1);
				box-shadow: 0 0 15px inset rgba(0,0,0,0.2);
				text-align: center;
				line-height: 100px;
				font-size: 20px;
				}

			.front{
				transform: translateZ(50px);/*往z轴移动50px，即超这电脑屏幕·外的方向*/
			}
			.back{
				transform: rotateY(180deg) translateZ(50px);/*默认，沿50%的位置绕Y轴旋转180deg，再往改面正面所对的方向即z轴移动50px*/
			}
			.right{
				transform: rotateY(90deg) translateZ(50px);
			}
			.left{
				transform: rotateY(-90deg) translateZ(50px);
			}
			.top{
				transform: rotateX(90deg) translateZ(50px);
			}
			.bottom{
				transform: rotateX(-90deg) translateZ(50px);
			}
			.a>div{
				backface-visibility: visible;/*后面可见*/
			}
			.b>div{
				backface-visibility: hidden;/*后面不可见*/
			}
		</style>
	</head>
	<body>
		<!--后面可见-->
		<div class="sieve a">
			<div class="front">1</div>
    		<div class="back">2</div>
    		<div class="right">3</div>
    		<div class="left">4</div>
    		<div class="top">5</div>
    		<div class="bottom">6</div>
		</div>
		<!--后面bu可见-->
		<div class="sieve b">
			<div class="front">1</div>
    		<div class="back">2</div>
    		<div class="right">3</div>
    		<div class="left">4</div>
    		<div class="top">5</div>
    		<div class="bottom">6</div>
		</div>
	</body>
</html>

小青龙8085

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transform之筛子

效果：代码：<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> <style> body{ perspective: 800px;/*视角距离*/ perspective-...
复制链接

扫一扫