CSS3 transitions 的几个demo03

最新推荐文章于 2025-05-10 22:30:50 发布

cheyajiu9920

最新推荐文章于 2025-05-10 22:30:50 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2618661/blog/636655

版权

本文介绍了一种使用HTML、CSS和JavaScript实现的3D翻转图片效果，通过设置不同的旋转角度和深度，使得多个图片在鼠标悬停时能够呈现出立体的翻转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</body>

</html>

.sinal{

width:400px;

height:400px;

background-color:#fff;

box-shadow:0 1px 3px rgba(0,0,0,.5);

-webkit-perspective:400px;

-moz-perspective:400px;

-0-perspective:400px;

perspective:400px;

backface-visibility:hidden;

position:relative;

}

.container{

width:300px;

height:150px;

-webkit-transition: -webkit-transform 0.5s ease;

-moz-transition: -moz-transform 0.5s ease;

-o-transition: -o-transform 0.5s ease;

transition: transform 0.5s ease;

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-o-transform-style:preserve-3d;

position:absolute;

left:10%;

}

.pic{

width:100px;

height:60px;

background-color:pink;

box-shadow:0 1px 3px rgba(0,0,0,.5);

position:absolute;

top:100px;

left:100px;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

-webkit-transform: rotateY(0deg) translateZ(107px);

-moz-transition: rotateY(0deg) translateZ(107px);

-o-transition: rotateY(0deg) translateZ(107px);

transition: rotateY(0deg) translateZ(107px);

transform-style: preserve-3d;

}

.pic:hover{

-webkit-transform: rotateY(0deg) translateZ(107px);

-moz-transition: rotateY(0deg) translateZ(107px);

-o-transition: rotateY(0deg) translateZ(107px);

transition: rotateY(0deg) translateZ(107px);

}

.pic1{

left:100px;

background-color:#ccc;

-webkit-transform: rotateY(120deg) translateZ(107px);

-moz-transition: rotateY(40deg) translateZ(107px);

-o-transition: rotateY(40deg) translateZ(107px);

transition: rotateY(40deg) translateZ(107px);

}

.pic2{

left:100px;

background-color:yellow;

-webkit-transform: rotateY(240deg) translateZ(107px);

-moz-transition: rotateY(320deg) translateZ(107px) translateZ(107px);

-o-transition: rotateY(320deg) translateZ(107px) translateZ(107px);

transition: rotateY(320deg) translateZ(107px);

}

转载于:https://my.oschina.net/u/2618661/blog/636655