Css3实现3D切换翻转效果
时间：5年前 阅读：5068
CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分
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>
.qiquanji{
width: 120px;
height: 35px;
margin: 0 auto;
}
#sd{
width: 120px;
height: 35px;
background-color: darkcyan;
text-align: center;
line-height: 35px;
position: relative;
transform-style: preserve-3d;
transition: all 0.3s linear;
}
#sd:hover{
transform: rotateX(90deg);
transition: all 0.3s linear;
-webkit-transform-origin: 50% 0;
}
#sd:before{
position: absolute;
top: 100%;
left: 0;
content: attr(data-hover);
width: 120px;
height: 35px;
transform: rotateX(-90deg);
transition: all 0.3s linear;
transform-origin: 50% 0;
text-align: center;
line-height: 35px;
background-color: darkkhaki;
}
</style>
<div class="qiquanji">
<div id="sd" data-hover="实现3D切换效果">
<p>实现3D切换效果</p>
</div>
</div>
</body>
</html>
效果点上面的（运行代码）来看
用一个GIF做一个大概效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论