本文主要包含h5+css3 实战教程,css3实战,html5 css3开发实战,html5和css3实战,html5与css3实战指南等相关知识,佚名 希望在学习及工作中可以帮助到您
一、前言
上一节，介绍了基础的CSS3 3D动画原理实现，也举了一个小小的例子来演示，但是有朋友跟我私信说想看看一些关于CSS3 3D的实例，所以在这里为了满足一下大家的需求，同时也为了以后能够更好的巩固CSS3 3D的知识，所以在这里写下这篇博文，希望能够帮助你更好的理解3D的制作和实现原理，同时也欢迎各位小伙伴对文中的错误给予指正
二、入门案例分析
这里先说一说我的规划，我打算先从入门级的案例入手，然后依次递推，最后要达到的效果是，理解完所有的例子的设计思路，基本上CSS3-3D制作就能够随心所欲。
1、矩形图片翻滚效果
这个效果比较简单，所以在这里就不多做解释了，先来复习一下上一节说的要创建一个3D环境，我们需要创建一个“灯光”，“舞台”，“演员”(相当于perspective、preserve-3d、image)，不清楚的小伙伴请看这里,具体的代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- div div img{
- width:300px;
- height:300px;
- position:absolute;
- /* -webkit-transition: all 0.8s; */
- }
- div div{
- -webkit-transition: all 1s;
- }
- #img1{
- -webkit-transform: translateZ(150px);
- /* -webkit-transition: all 0.8s; */
- }
- #img2{
- -webkit-transform: rotateX(-90deg) translateZ(150px);
- /* -webkit-transition: all 0.8s; */
- }
- #img3{
- -webkit-transform: rotateZ(180deg) translateZ(-150px);
- }
- #img4{
- -webkit-transform: rotateX(90deg) translateZ(150px);
- }
- #img5{
- -webkit-transform:rotateY(90deg) translateZ(150px);
- }
- #img6{
- -webkit-transform: rotateY(-90deg) translateZ(150px);
- }
- /* div div:hover{
- -webkit-transform: rotateX(270deg);
- } */
- </style>
- </head>
- <body>
- <div style="margin-left: 100px;height:300px;width:300px;position:absolute;perspective: 1000px;">
- <div id="box" style=&quo