今天玩了下 css 3D 旋转，顺便写了一个小 Demo

只写了一个 hover 向上翻转的，其他效果基本类似，就没多写，了解原理即可，可自行扩展。

先简单贴个效果图

直接上代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>3D盒子旋转Demo</title><style>.rotate-box {height: 137px;width: 286px;overflow: hidden; /* 隐藏翻转上去和翻转下去的图片 */}.rotate-inner {transition: all .4s ease;perspective: 428px; /* 重点属性，定义 3D 元素距视图的距离，有他才有3D效果 */-webkit-perspective: 428px;}.rotate-inner .top-block,.rotate-inner .bottom-block {backface-visibility: hidden; /* 辅助属性-属性定义当元素不面向屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用 */transition: all .4s ease;-webkit-backface-visibility: hidden;-webkit-transition: all .4s ease;width: 286px;height: 137px;}.rotate-inner .top-block {transform-origin: bottom; /* 旋转轴线位置 */-webkit-transform-origin: bottom;transform: rotateX(0deg); /* 默认旋转角度 */-webkit-transform: rotateX(0deg);background-color: blue;}.rotate-inner .bottom-block {transform-origin: top; /* 旋转轴线位置 */-webkit-transform-origin: top;transform: rotateX(-90deg);-webkit-transform: rotateX(-90deg);background-color: #777;}.rotate-box:hover .rotate-inner {margin-top: -137px; /* 旋转后上移，把下面的block显示，上面的隐藏 */}.rotate-box:hover .rotate-inner .top-block {transform: rotateX(90deg); /* 旋转后角度 */-webkit-transform: rotateX(90deg);}.rotate-box:hover .rotate-inner .bottom-block {transform: rotateX(0);-webkit-transform: rotateX(0);}</style>
</head>
<body><div class="rotate-box"><div class="rotate-inner"><div class="top-block"></div><div class="bottom-block"></div></div></div>
</body>
</html>

其实就是两个块上下堆放，外层设置超出隐藏，然后把上面的块沿X轴底部旋转，下面的沿X轴顶部旋转，最后相当于下面的呈现出来了，上面的又隐藏掉了
重点是perspective属性，定义 3D 元素距视图的距离，有他才有3D效果

感兴趣的小伙伴可以自己去拓展下

觉得有用的小伙伴右上角点个赞支持一下~

扫描上方二维码关注我的订阅号~

css 3D 旋转 - Demo相关推荐

css 3d旋转图片（css旋转木马）（详细教程）
成品展示接下来开始制作旋转老婆图片一.准备html骨架和基本的css 先准备好html骨架(后面为了挨个测试可以先把后面5个div注释掉) <div class="bigbox&q ...
css同时旋转rotate3d,纯css 3D旋转
#a { width:800px; height:400px; margin:0 auto; /*perpective*/ -webkit-perspective:1200px; } #b { wid ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
【前端领域】3D旋转超美相册（HTML+CSS）
世界上总有一半人不理解另一半人的快乐. --<爱玛> 目录一.前言二.本期作品介绍 3D旋转相册三.效果展示四.详细介绍五.编码实现 index.html style.css i ...
【css实现3D旋转卡片】
提示:话不多说直接上代码前言实现效果如下一.html代码 <!DOCTYPE html> <html><head><meta http-equiv=&q ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页这是程序员表白 ...
HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...

css 3D 旋转 - Demo

今天玩了下 css 3D 旋转，顺便写了一个小 Demo

感兴趣的小伙伴可以自己去拓展下

觉得有用的小伙伴右上角点个赞支持一下~

扫描上方二维码关注我的订阅号~

css 3D 旋转 - Demo相关推荐

最新文章

热门文章