CSS3好看的3D切换效果

时间：4年前阅读：5523

本文实现好看的3D翻转效果。目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit）

CSS3变换主要的属性如下：

（1）perspective（参考以上类名stage中的使用）

　　用法：应用于舞台元素，为元素定义perspective属性时，其子元素会获得透视效果。

　　作用：定义3D 元素距视图的距离（视距），单位是像素。可以理解为距物体多远进行观察，因此这个值越小，距离元素物体更近，3D效果越明显；该值越大，距离元素物体越远，3D效果越不明显，因为远远看的只见一坨东西。

　　注意：在实际应用中，可以通过设置多个舞台元素，使子元素的变换相对于各自的舞台实现，那么每一个舞台下的元素变换所产生的视觉效果都是一致的（参考我上面的第二个例子）。

（2）perspective-origin（参考以上类名stage中的使用）

　　用法：应用于舞台元素，与perspective配合使用，子元素会获得透视效果

　　作用：可以理解为眼睛所看的位置，默认舞台中心点

　　注意：几种设置方法，如

　　　　perspective-origin: 0px 100px; （使用具体数值）

　　　　perspective-origin: 0% 50%;　（使用百分比）

　　　　perspective-origin: left center; （共3种： left/center/right）

（3）transform-style: preserve-3d（参考以上类名container中的使用）

　　用法：用于动画子元素的父元素，也就是容器

　　作用：具有两个作用，首先使子元素具有透视效果，其次使子元素保留父元素的3D位置。

　　注意：这个属性究竟有什么用？和perspective有什么干系？

该属性是为了嵌套3D元素而使用的！perspective和transform-style各自使得子元素具有3D透视效果，并且transform-style:preserve-3d使子元素保留父元素的3D位置，简单来说就是嵌套。如果不需要嵌套3D元素，就不需要这个属性。看下面的代码例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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;
	overflow: 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="https://www.qiquanji.com/data/img/dmj/201904141555212147207362.jpg" /></div>
				<p class="back">购物网图片放大镜JS效果实现</p>
			</div>
		</li>
		<li class="stage">
			<div class='container'>
				<div class="front"><img src="https://www.qiquanji.com/data/img/dmj/201904051554472585115749.jpg" /></div>
				<p class="back">jquery鼠标移入图片左滑动效果</p>
			</div>
		</li>
		<li class="stage">
			<div class='container'>
				<div class="front"><img src="https://www.qiquanji.com/data/img/dmj/201904151555302585132363.jpg" /></div>
				<p class="back">JS漂浮广告实现代码(全屏)</p>
			</div>
		</li>
	</ul>
</body>

</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3好看的3D切换效果

网友评论