本文介绍了一种使用CSS实现的3D翻转动画效果。通过设置元素的宽度、高度及透视属性，并利用transform属性进行旋转操作，实现了鼠标悬停时元素沿X轴翻转90度的效果。同时，通过伪元素:before设置了翻转后的背景颜色变化。
CSS
语言：
CSSSCSS
确定
.out {
width: 400px;
height: 40px;
margin: 50px auto;
perspective: 1000px;
}
.box {
color:#fff;
line-height:40px;
text-align:center;
height: 40px;
background: #2195de;
-webkit-transition: -webkit-transform 0.3s;
-webkit-transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
/*
transform-origin:left top;
transform: translate3d(0, 0, -400px)*/
/*transform:translateZ(200px)
transform:rotateZ(0deg);
transition:0.5s;
transform:scaleZ(1) rotateX(45deg) */
}
.box::before {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #0965a0;
content: attr(data-hover);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
/*
transform-origin:left top;
transform: translate3d(0, 0, -400px)*/
/*transform:translateZ(200px)
transform:rotateZ(0deg);
transition:0.5s;
transform:scaleZ(1) rotateX(45deg) */
}
.out:hover .box{
transform: rotateX(90deg);/* transform:rotateZ(180deg) rotateX(180deg) rotateY(180deg)
transform:rotate3d(1,1,1,360deg)
transform:scaleZ(5) rotateX(45deg) ;*/
}
.out:hover .box::before{
background: #28a2ee;/* transform:rotateZ(180deg) rotateX(180deg) rotateY(180deg)
transform:rotate3d(1,1,1,360deg)
transform:scaleZ(5) rotateX(45deg) ;*/
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
