CSS之3D翻转

    当时写登陆注册界面的时候,想通过3D翻转来实现登录注册界面的切换,如今鸽了快一个月的简书了。下面讲讲3D翻转的原理及其如何实现。


    3D翻转的实现原理是基于CSS的3D变换和过渡效果实现的。在CSS中,可以使用 transform 属性来进行2D和3D变换,包括旋转、缩放、平移等。而 transition 属性可以用来设置CSS属性的过渡效果。

     可以设置一个元素的 transform-style 属性为 preserve-3d,可以让它的子元素继承它的3D变换,从而实现3D效果。

    然后通俗来讲,我们需要创建一个容器(盒子),它作为父元素包括两个子元素(正面和反面),将所需要的内容分别添加在正面和反面。而在浏览器中,默认展示的是一个面,再实现:hover类,使光标放在盒子上时,便进行180°的翻转,转到另一个面。

    实现步骤大概是这样的:

    1.在HTML中创建一个元素作为容器,这个容器包含两个子元素,分别表示正面和反面。

    2.使用CSS设置容器的宽度、高度和透视效果。

    3.使用CSS设置正反面元素的宽度、高度、位置和背景色等样式。

    4.使用CSS设置翻转动画效果(通过设置旋转角度、过渡时间和过渡函数等属性)。

    思路其实非常清晰,但第一次实现可能比较复杂。

    那么下面是一个3D翻转实现的示例:

    <HTML>

   

<CSS>


    希望此文能对你的学习有帮助,有疑问可以私信。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 效果展示: JS BIN 代码展示: [html]                 [css] .card {...
    lixiaochi阅读 5,182评论 0 1
  • CSS3动画属性:transform(变换):大小、位置、颜色、变形等状态的变化transition(过渡):初始...
    Neuro_annie阅读 6,938评论 0 5
  • CSS3 3D 转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功...
    videring阅读 3,677评论 0 0
  • css3渐变生成工具 文本 text-overflow clip 隐藏超出文本 ellipsis 超出部分使用省略...
    DeeJay_Y阅读 4,884评论 0 0
  • 2D转换 2D转换使用的属性是transform,用于对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和动画,可以...
    白棠阅读 1,774评论 0 0