css 3D盒子动画

翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。
本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。
主要通过::before伪属性给盒子添加侧面，通过定位使其放置在正面的正下方，再旋转使其垂直于正面（需要设置transform-origin: 50% 0;从而以y轴0刻度处为旋转中心）
给div绑定div:hover ，它的子元素span的transform属性发生变化，从而进行翻转动作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div><span data-hover="绿杨阴里白沙堤">绿杨阴里白沙堤</span></div><div><span data-hover="素衣莫起风尘叹">素衣莫起风尘叹</span></div><div><span data-hover="天阶月色凉如水">天阶月色凉如水</span></div><div><span data-hover="一片冰心在玉壶">一片冰心在玉壶</span></div><style type="text/css" media="screen">div{display: inline-block;perspective: 200px;margin: 30px 20px;color: #fff;letter-spacing: 1px;}span {background: #2195de;transition: transform 0.75s;transform-origin: 50% 0;transform-style: preserve-3d;display: inline-block;line-height: 50px;padding: 0 15px;}span::before {position: absolute;top: 100%;left: 0;width: 100%;height: 100%;background: #ff65a0;content: attr(data-hover);padding: 0 15px;box-sizing: border-box;transition: background 0.75s;transform: rotateX(-90deg);transform-origin: 50% 0;}div:hover span{transform: rotateX(90deg) translate3d(0,-50px,0);}div:hover span::before{background: #00a5a0;}</style>
</body>
</html>

css 3D盒子动画相关推荐

css代码写3D盒子动画
完整代码见下: html: <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
4、CSS立体盒子动画——复仇者联盟
1.效果展示 2.免费代码下载 CSS+立体盒子动画+复仇者联盟-Javascript文档类资源-CSDN下载 3.HTML代码结构 <body> <div class=" ...
CSS 3D变形动画属性之逆天立方体叠加动画
上一篇, juejin.im/post/5993d9- 把立方体的盒子搭出来之后,因为怕文章又臭又长(嗯,就是没有想好玩什么效果,偏不告诉你)关于动效没有做更多的处理,只做了一个绕Y轴旋转,这篇试着做 ...
css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下: .className{ -webk ...
逆战班 css 3D效果+动画
### 3D 2d: 水平方向(x轴) 和垂直方向(y轴) 3d: 多了一个z轴 z轴就是你对屏幕垂直的视线,靠近屏幕的方向就是正向,远离屏幕的线是反向 css3 景深 ...
可控制的CSS3D盒子动画
今天来看一个CSS 3D盒子动画,利用jqueryUI和jquery实现盒子动画的控制. 简易效果在线把玩请戳这里,下载收藏请戳这里. 优化效果在线把玩戳这里,下载收藏请戳这里. 我们需要两个slid ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
3D风车动画CSS HTML代码
下载地址 3D风车动画CSS HTML代码,风车样式是用css和div构造的. dd:
css自定义盒子形状及动画应用
css自定义盒子形状及动画应用 <style> clip-path: polygon(X1 Y1,X2 Y2,....) </style> 当我们写页面时对盒子的形状有需求时, ...

css 3D盒子动画

css 3D盒子动画相关推荐

最新文章

热门文章