css3旋转立方体-_-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!--抱歉,时间紧暂时只写了谷歌的方法,ie等浏览器的兼容还没写0.0.--> <title>C3旋转立方体</title> <style> * { margin: 0; padding: 0; } body { background-color: skyblue; } .box { margin: 100px auto; width: 200px; height: 200px; position: relative; /*3d旋转效果*/ transform: rotate3d(1, 1, 0, -30deg); /*保留旋转效果不让回来*/ transform-style: preserve-3d; /*喜欢添加景深效果的可以自己调节啊*/ perspective: 0px; /*角度*/ perspective-origin: 0px 0px; } .box > div { width: 200px; height: 200px; position: absolute; opacity: 0.5; text-align: center; line-height: 200px; } .front { background-color: #ffc96b; transform: translateZ(100px); } .back { background-color: #a2faff; transform: translateZ(-100px) rotate(180deg); } .left { background-color: #ffcef2; transform: translateX(-100px) rotateY(-90deg); } .right { background-color: #a2d1ff; transform: translateX(100px) rotateY(90deg); } .top { background-color: #f0f4ff; transform: translateY(-100px) rotateX(90deg); } .bottom { background-color: #26d8ff; transform: translateY(100px) rotateX(-90deg); } .box:hover { animation: move 5s infinite linear; } @keyframes move { from { transform: rotate3d(1, 0, 0, 290deg); } 50% { transform: rotate3d(0, 1, 0, -290deg); } to { transform: rotate3d(0, 0, 1, 266deg); } } </style> </head> <body> <div class="box"> <div class="front">FRONT</div> <div class="back">BACK</div> <div class="left">LEFT</div> <div class="right">RIGHT</div> <div class="top">TOP</div> <div class="bottom">BOTTOM</div> </div> </body> </html>
css3旋转立方体-_-的更多相关文章
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 第102天:CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- css3之3D 旋转立方体与哆啦A梦
主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片,分别让其围绕X轴,Y轴,Z轴旋转60度,鼠标放上开始发生变化. 具体代码如下图所示: <!DOCTYPE html> ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- CSS3全览_动画+滤镜
CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...
- css3旋转倾斜3d小动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css3旋转小三角
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- CSS之旋转立方体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- L105
A pill could soon radio signals from inside your gut to help doctors diagnose diseases from ulcers t ...
- codeforces 710C C. Magic Odd Square(构造)
题目链接: C. Magic Odd Square Find an n × n matrix with different numbers from 1 to n2, so the sum in ea ...
- Android开发中高效的数据结构
android开发中,在java2ee或者android中常用的数据结构有Map,List,Set,但android作为移动平台,有些api(很多都是效率问题)显然不够理想,本着造更好轮子的精神,an ...
- 创建Azure Blob Snapshot的脚本
在前面的文章中介绍了如何创建Azure Blob Snapshot.那篇文章中创建的脚本思路是:遍历所有Storage Account,找到所有vhd文件,进行Snapshot的创建. 但这种方式不够 ...
- selenium如何获取已定位元素的属性值?
HTML源代码: <div class="res-status" data-fortune="5" data-selfsos="" d ...
- js---window对象的三种窗口
============================================================================ window对象的三种窗口.html < ...
- SQL中top使用方法
转自:https://www.cnblogs.com/wang7/archive/2012/07/09/2582891.html 1. 在编写程序中,我们可能遇到诸如查询最热门的5篇文章或返回满足条件 ...
- 全文检索技术---solr
1 Solr介绍 1.1 什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tom ...
- MySql数据查询的逻辑蕴含条件问题
SQL语言中没有蕴含逻辑运算.但是,可以利用谓词演算将一个逻辑蕴含的谓词等价转换为:p->q ≡┐p∨q. 我们通过一个具体的题目来分析:(具体的表和数据详见文章:Mysql数据库中的EXIST ...
- R: 关于 table 函数的应用
################################################### 问题:关于 table 函数 18.5.9 来一个关于 table 函数的例子,说明tabl ...