CSS3之3D变换实例详解

时间 2019-12-11 标签 css3 css 3 3d 3 d 变换实例详解

CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^css

如下CSS代码为了简洁没有添加前缀，请视状况自行添加（自动化时代推荐使用其余的一些方法，如gulp-autoprefixer插件，由于本人更喜欢gulp #_#）web

还有w3school上面的这句话早已通过时：npm

目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit，还有其余浏览器的一些小问题）gulp

能够经过Can I use网站查看各浏览器对该CSS3属性的支持状况：浏览器

据说如今流行先看效果和代码再解释？ide

（1）效果一动画

HTML代码：网站

<div class='stage'>
    <div class='container'>
        <div class='front'></div>
        <div class='back'></div>
    </div>
</div>

View Code

CSS代码：url

.stage{ width: 140px; height: 200px; perspective: 800px;
} .container{ position: relative; width: 140px; height: 200px; transform-style: preserve-3d; transition: 1s;
} .front{ position: absolute; width: 140px; height: 200px; background-image: url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg'); background-size: cover; backface-visibility: hidden;
} .back{ position: absolute; width: 140px; height: 200px; background-image: url('http://d3.freep.cn/3tb_160824110159262h572240.jpg'); background-size: cover; transform: rotateY(180deg); backface-visibility: hidden;        
} .stage:hover .container{ transform: rotateY(180deg);
}

View Code

（2）效果二spa

效果连接： http://codepen.io/FEwen/pen/kXOXpJ

HTML代码：

<ul class="wrap">
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div>
            <p class="back">帅气的胡歌</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div>
            <p class="back">美腻的赵丽颖</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div>
            <p class="back">清纯的刘亦菲</p>
        </div>
    </li>
</ul>

View Code

CSS代码：

*{
    margin: 0;
    padding: 0;
}
.stage{
    width: 100px;
    height: 100px;
    perspective: 2000px;
    list-style: none;
}
.container{
     position: relative;
     width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transition: 1s;
}
.front{
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translateZ(50px);
    backface-visibility: hidden;
}
.front img{
    width: 100%;
    height: 100%;
}
.back{
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    transform: rotateY(90deg) translateZ(50px);
    backface-visibility: hidden;
}
li:nth-child(1) .back{
    background-color: skyblue;
}
li:nth-child(2) .back{
    background-color: pink;
}
li:nth-child(3) .back{
    background-color: lightyellow;
}
.container:hover{
    transform: rotateY(-90deg);
}

View Code

总结：

上面的示例代码中注意几个类名：类名stage代表舞台元素，类名container代表父容器，还有container里面的变换子元素。

这是标准的嵌套3D变换结构：

　　舞台（perspective,perspective-origin）

　　　　父容器（transform-style: preserve3d）（各类变换）

　　　　　　子元素（各类变换）

　　　　　　　...

还有无嵌套的3D变换结构：

　　舞台（perspective,perspective-origin）

　　　　子元素（各类变换）

　　　　　　　...

能够先看上方结构有个直观的认识，下面详细讲解。

CSS3变换主要的属性以下：

（1）perspective（参考以上类名stage中的使用）

　　用法：应用于舞台元素，为元素定义perspective属性时，其子元素会得到透视效果。

　　做用：定义3D 元素距视图的距离（视距），单位是像素。能够理解为距物体多远进行观察，所以这个值越小，距离元素物体更近，3D效果越明显；该值越大，距离元素物体越远，3D效果越不明显，由于远远看的只见一坨东西。

　　注意：在实际应用中，能够经过设置多个舞台元素，使子元素的变换相对于各自的舞台实现，那么每个舞台下的元素变换所产生的视觉效果都是一致的（参考我上面的第二个例子）。

（2）perspective-origin（参考以上类名stage中的使用）

　　用法：应用于舞台元素，与perspective配合使用，子元素会得到透视效果

　　做用：能够理解为眼睛所看的位置，默认舞台中心点

　　注意：几种设置方法，如

　　　　perspective-origin: 0px 100px; （使用具体数值）

　　　　perspective-origin: 0% 50%;　（使用百分比）

　　　　perspective-origin: left center; （共3种： left/center/right）

（3）transform-style: preserve-3d（参考以上类名container中的使用）

　　用法：用于动画子元素的父元素，也就是容器

　　做用：具备两个做用，首先使子元素具备透视效果，其次使子元素保留父元素的3D位置。

　　注意：这个属性究竟有什么用？和perspective有什么干系？

　　　　　——该属性是为了嵌套3D元素而使用的！perspective和transform-style各自使得子元素具备3D透视效果，而且transform-style:preserve-3d使子元素保留父元素的3D位置，简单来讲就是嵌套。若是不须要嵌套3D元素，就不须要这个属性。看下面的例子：

　　效果：

　　HTML代码：

<div class='stage'>
    <div class='container'></div>
</div>

View Code

　　CSS代码：

.stage{ width: 140px; height: 200px; perspective: 800px;
} .container{ width: 140px; height: 200px; transition: 1s; background-image: url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg'); background-size: cover;
} .stage:hover .container{ transform: rotateY(180deg);
}

View Code

（4）backface-visibility: hidden（参考以上作3D变换的子元素中的使用）

　　用法：用于动画子元素

　　做用：3D透视下，默认是能够透过背面看到正面的内容（参见第三点的效果），可根据须要设置为不可见。

（5）最后一点——变换坐标说明

　　下面盗图一张

　　坐标系是相对的！相对的！相对的！

　　坐标系会跟着当前元素的变换而变换。

　　例如当前div应用了rotateY(60deg)，那么整个坐标系也会跟着rotateY(60deg)，所以对这个div使用translateZ()始终是和正面垂直的方向。

（6）Last but not least，祝开心愉悦每一天，若是发现我有任何错误的地方，请狠狠地告诉我吧！