CSS3 系列我已经写过两篇文章,感兴趣的同学可以先看一下,
第一篇主要列出了一些常用或经典的 CSS3 技巧和方法;第二篇是一个用 CSS3 实现的立方体实例,详细讲解了 3D 旋转和 transform 等属性。
本文再来利用 CSS3 属性来编写一个实例,话不多说,先直接看看效果。
因为前面已经讲解过一些属性的用法,此篇文章不再赘述,只记录这个实例的编码过程。项目代码已上传至 github,
直接看 html 布局:
- <div class="my-container">
- <div class="photo-wrap">
- <div class="container">
- <div class="img img01">
- </div>
- <div class="img img02">
- </div>
- <div class="img img03">
- </div>
- <div class="img img04">
- </div>
- <div class="img img05">
- </div>
- <div class="img img06">
- </div>
- <div class="img img07">
- </div>
- <div class="img img08">
- </div>
- <div class="img img09">
- </div>
- </div>
- </div>
- </div>
最外层的大容器根据实际情况定义样式即可。
- .my - container {
- width: 800px;
- height: 500px;
- margin: 20px auto;
- }
perspective 属性用来激活一个 3D 空间,使其子元素都会获得透视效果(使用了 3D 变换的元素,此实例中也就是相册容器元素)。
- .photo - wrap {
- perspective: 800px;
- width: 800px;
- }
相册容器的
样式,表示所有子元素在 3D 空间中呈现。
- transform-style: preserve-3d;
- .container {
- width: 800px;
- height: 500px;
- margin: 0 auto;
- position: relative;
- transform - style: preserve - 3d;
- }
- .img {
- width: 200px;
- height: 118px;
- line - height: 118px;
- text - align: center;
- position: absolute;
- top: 160px;
- left: 300px;
- box - shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
- background: pink;
- }
现在浏览器看看效果:
右上图可以看出,现在每张图片都固定在同一个位置。很明显不是我们想要的效果。但是想要达到我们预期的效果,要怎么改变呢?
现在这些图片都在容器的最中心点以平面的形式展现的,要想形成一个圆形,就要用到旋转属性(因为要绕着 Y 轴旋转,所以是
)了。
- rotateY
这里一共有 9 张图,所以按
为单位来分别对每张图进行旋转。
- 360/9=40度
- .img01 {
- transform: rotateY(0deg);
- }.img02 {
- transform: rotateY(40deg);
- }.img03 {
- transform: rotateY(80deg);
- }.img04 {
- transform: rotateY(120deg);
- }.img05 {
- transform: rotateY(160deg);
- }.img06 {
- transform: rotateY(200deg);
- }.img07 {
- transform: rotateY(240deg);
- }.img08 {
- transform: rotateY(280deg);
- }.img09 {
- transform: rotateY(320deg);
- }
增加旋转之后,再看看效果:
我们发现这些图片不在一个平面了,但是都挤在了一起,我们试着把每张图片都向自己的前方 (
) 移动 300 像素,看看会发生什么。
- translateZ
- .img01 {
- transform: rotateY(0deg) translateZ(300px);
- }.img02 {
- transform: rotateY(40deg) translateZ(300px);
- }.img03 {
- transform: rotateY(80deg) translateZ(300px);
- }.img04 {
- transform: rotateY(120deg) translateZ(300px);
- }.img05 {
- transform: rotateY(160deg) translateZ(300px);
- }.img06 {
- transform: rotateY(200deg) translateZ(300px);
- }.img07 {
- transform: rotateY(240deg) translateZ(300px);
- }.img08 {
- transform: rotateY(280deg) translateZ(300px);
- }.img09 {
- transform: rotateY(320deg) translateZ(300px);
- }
增加旋转和移动之后的效果:
至此,就已经达到我们预期的效果了。把每个图片标签加上喜欢的照片,就 OK 啦!
想要让这个相册动起来,加一个动画就好了。
- @keyframes rotateY360 {
- from {
- transform: rotateY(0deg);
- }
- to {
- transform: rotateY(360deg);
- }
- }
然后给 "相册容器"container 元素添加动画属性:
- animation: rotateY360 15s ease - in-out infinite;
最终,大功告成:
代码已经上传至 github。,喜欢的童鞋们不妨点个 star 呀!谢谢~
来源: http://www.bubuko.com/infodetail-1857320.html