柚子快报邀请码778899分享:CSS3实现图片的3D旋转效果
准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。
先看看效果:
代码如下:
/* 最外层盒子设置 */
.box {
position: relative;
width: 500px;
height: 278px;
margin: 100px auto;
perspective: 1500px;
}
/* 盒子内的所有图片进行定位,背面不可见,背面隐藏起来 */
.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 第二张图片反过来是正的,要提前把后面的的图片翻转180度 */
.box img:nth-of-type(2) {
transform: rotateX(-180deg);
}
/* 设置过渡效果 */
.box img {
transition: all 1s;
}
/* 鼠标移动到图片时,前面的图片翻转180度,后面的图片翻转回0度 */
.box:hover img:nth-of-type(1) {
transform: rotateX(180deg);
}
.box:hover img:nth-of-type(2) {
transform: rotateX(0deg);
}
柚子快报邀请码778899分享:CSS3实现图片的3D旋转效果
精彩内容
发表评论