最近做一個(gè)網(wǎng)站，想弄一個(gè)炫酷的效果，所以想到了用CSS3做一個(gè)圖片3D旋轉(zhuǎn)的效果绩聘。【實(shí)際就是做一個(gè)3D動(dòng)態(tài)旋轉(zhuǎn)相冊(cè)耗啦，自己發(fā)揮哦】
下面直接上代碼了凿菩。
-------------------start------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3制作的3d立體旋轉(zhuǎn)動(dòng)畫效果-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
ul{
? ? ? ? list-style: none;
? ? ? ? width: 200px;
? ? ? ? height: 150px;
? ? ? ? margin: 70px auto;
? ? ? ? /* 父盒子開啟3d */
? ? ? ? transform-style: preserve-3d;
? ? ? ? /* 引入動(dòng)畫效果 */
? ? ? ? animation: rotate 3s linear infinite;
? ? }
? ? @keyframes rotate {
? ? ? ? /* 旋轉(zhuǎn)沿x軸旋轉(zhuǎn)-10度,再繞y軸旋轉(zhuǎn) */
? ? ? ? 0%{
? ? ? ? ? ? transform: rotateX(-10deg) rotateY(0deg)
? ? ? ? }
? ? ? ? 100%{
? ? ? ? ? ?transform: rotateX(-10deg)? rotateY(360deg)
? ? ? ? }
? ? }
? ? ul li img{
? ? ? ? /* 圖片和父盒子一樣大 */
? ? ? ? width: 100%;
? ? ? ? height: 100%
? ? }
? ? ul li{
? ? ? ? /* 絕對(duì)定位,先讓li標(biāo)簽重疊 */
? ? ? ? position: absolute;
? ? }
? ? ul li:nth-child(1){
? ? ? ? /* 先繞y軸旋轉(zhuǎn)60度,再沿z軸平移200px,就會(huì)形成立體感 */
? ? ? ? transform: rotateY(60deg) translateZ(200px)
? ? }
? ? ul li:nth-child(2){
? ? ? ? transform: rotateY(120deg) translateZ(200px)
? ? }
? ? ul li:nth-child(3){
? ? ? ? transform: rotateY(180deg) translateZ(200px)
? ? }
? ? ul li:nth-child(4){
? ? ? ? transform: rotateY(240deg) translateZ(200px)
? ? }
? ? ul li:nth-child(5){
? ? ? ? transform: rotateY(300deg) translateZ(200px)
? ? }
? ? ul li:nth-child(6){
? ? ? ? transform: rotateY(360deg) translateZ(200px)
? ? }</style>
</head>
<body>
? ? <ul>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? ? ? <li><img src="images/staff_xw.png" alt=""></li>
? ? </ul>
<script>
</script>
</body>
</html>
-------------------end------------------------------
現(xiàn)在給大家看看效果吧：
喜歡的盆友、遇到問題的盆友帜讲，請(qǐng)到公眾號(hào)：【軟件編程網(wǎng)站開發(fā)】
