案例1：旋转的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> body { perspective: 1000px; } section { width: 300px; height: 200px; margin: 100px auto; background: url(../3D/images/1.jpg) no-repeat; background-size: cover; position: relative; transform-style: preserve-3d; /* 让父盒子里面的子盒子以3d效果显示 */ transition: 5s linear; /* 匀速 all 是可以省略的， 省略默认的all*/ } section:hover { transform: rotateY(360deg); } section div { width: 100%; height: 100%; background: url(../3D/images/2.jpg) no-repeat; background-size: cover; position: absolute; top: 0; left: 0; } section div:nth-child(1) { transform: rotateY(0deg) translateZ(400px); } section div:nth-child(2) { transform: rotateY(60deg) translateZ(400px); } section div:nth-child(3) { transform: rotateY(120deg) translateZ(400px); } section div:nth-child(4) { transform: rotateY(180deg) translateZ(400px); } section div:nth-child(5) { transform: rotateY(240deg) translateZ(400px); } section div:nth-child(6) { transform: rotateY(300deg) translateZ(400px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>
案例2：开门大吉
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 450px; height: 300px; border: 1px solid #000; margin: 100px auto; background: url(images/1.jpg) no-repeat; position: relative; perspective: 1000px; /*给父盒子添加透视效果*/ } .door-l, .door-r { position: absolute; top: 0; width: 50%; height: 100%; background-color: pink; transition: all 1s; /*两个门都做过渡效果*/ background: url(images/bg.png); } .door-l { left: 0; border-right: 1px solid #000; transform-origin: left;/* 左侧盒子按照左边翻转*/ } .door-r { right: 0; left: 1px solid #000; transform-origin: right;/* 右侧盒子按照右边翻转*/ } .door-l::before, .door-r::before { /*伪元素 就是插入一个元素标签*/ content: ''; position: absolute; top: 50%; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; /*圆角*/ transform：translateY(-50%); /*translate 如果是百分比， 就是走自己高度的一半*/ } .door-l::before { right: 5px; } .door-r::before { left: 5px; } /*鼠标经过section 盒子 两个门盒子 翻转 rotateY*/ section:hover .door-l { transform: rotateY(-130deg); /*因为往左边翻转，所以是负值*/ } section:hover .door-r { transform: rotateY(130deg); } </style> </head> <body> <section> <div class="door-l"></div> <div class="door-r"></div> </section> </body> </html>
案例3：导航栏旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d导航</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { /*取消ul的默认样式*/ list-style: none; margin: 90px auto; width: 800px; } ul li { width: 160px; height: 50px; float: left; position: relative; /*设置子元素显示方式为3d*/ transform-style:preserve-3d; /*设置旋转的过渡效果*/ transition: transform 1s; } li a { position: absolute; /*设置了相对定位的元素，默认具有块元素的特点*/ /*取消a链接的默认下划线*/ text-decoration: none; text-align: center; line-height: 50px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); top: 0; left: 0; width: 100%; height: 100%; } li a:first-child { transform: translateZ(25px); background-color: #ff5544; } li a:last-child { background-color: skyblue; transform: rotateX(-90deg) translateZ( 25px ); } li:hover { transform: rotateX(90deg); } </style> </head> <body> <ul> <li> <a href="#">信息科学与工程学院</a> <a href="#">Javaweb专业</a> </li> <li> <a href="#">信息科学与工程学院</a> <a href="#">Javaweb专业</a> </li><li> <a href="#">信息科学与工程学院</a> <a href="#">Javaweb专业</a> </li><li> <a href="#">信息科学与工程学院</a> <a href="#">Javaweb专业</a> </li><li> <a href="#">信息科学与工程学院</a> <a href="#">Javaweb专业</a> </li> </ul> </body> </html>
