CSS3制作的圖片3D旋轉特效

2024-09-05 12:17:20

字體：大中小

來源：轉載

供稿：網友

CSS3實現的圖片三維旋轉特效，若不使用CSS3的話，類似這種效果估計需要JavaScript配合，現在有了CSS3，似乎一切變得如此簡單給力。不過目前IE8不支持CSS3，因此對于使用IE8的用戶來說，只能是一大遺憾了，所以請大家使用火狐或Chrome瀏覽器測試看效果。

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>CSS3-3D旋轉</title></head><body><style type="text/css">*{margin:0;padding:0px;}body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}#container {position: relative; height:362px; width: 282px; margin: 0 auto;top:50px;    -webkit-perspective: 800px;/*3d場景*/    -moz-perspective: 800px;}#container div {position:absolute; left:0; top:0; width:242px; height: 322px; padding:20px; background:#463;    -ms-border-radius: 5px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    -webkit-transition: 1.5s ease-in-out;    -moz-transition: 1.5s ease-in-out;    -ms-transition: 1.5s ease-in-out;    -o-transition: 1.5s ease-in-out;    transition: 1.5s ease-in-out;}#container div.lower {font-family: verdana, arial, sans-serif; background:#642;    background: -moz-linear-gradient(-45deg, #642, #864 50%, #642 100%);      background: -webkit-gradient(linear, 0 0, 100% 100%, from(#642), color-stop(50%, #a86), color-stop(100%, #642));    -moz-transform-style: preserve-3d;    -moz-backface-visibility: hidden;/*抖動*/    -webkit-transform-style: preserve-3d;    -webkit-backface-visibility: hidden;    -moz-transform: rotateY(-180deg);    -webkit-transform: rotateY(-180deg);}#container div.lower h1 {font-size:20px; padding:0; margin:0; color:#fff; line-height:40px;}#container div.lower p {font-size:11px; padding:0; margin:0; color:#eee; line-height:20px;}#container div.lower a {color:#ff0;}#container div.upper {    -moz-transform-style: preserve-3d;    -moz-backface-visibility: hidden;    -webkit-transform-style: preserve-3d;    -webkit-backface-visibility: hidden;    background: -moz-linear-gradient(-45deg, #463, #8a7 50%, #463 100%);      background: -webkit-gradient(linear, 0 0, 100% 100%, from(#463), color-stop(50%, #8a7), color-stop(100%, #463)); }#container div.upper img {border:1px solid #fff;width:242px;}#container:hover div.lower {    -moz-transform: rotateY(0);    -webkit-transform: rotateY(0);}#container:hover div.upper {    -webkit-transform: rotateY(180deg);    -moz-transform: rotateY(180deg);}</style><div   class="iwvjtn8m0"   id="container">    <div   id="iwvjtn8m0"   class="lower">        <h1>The Barn Owl</h1>        <p>汽車可以不買日貨，但影像產品不買日本的還可以買哪里的？所以不是抵制日貨，而是奮發自強，技術領先才行。所以各位要在自己的崗位上負責任的干好本職工作、推動祖國強大才是懲罰日本的核心所在。</p>        <p>Source Wikipedia</p>    </div>    <div   id="iwvjtn8m0"   class="upper">        <img src="http://www.survivalescaperooms.com/jscss/demoimg/201208/owl.jpg" alt="Barn owl">    </div></div></body></html>

上一篇：CSS3.0實例教程:使用transition制作動感十足的圖文切換

下一篇：css3三維動畫菜單上下翻轉