纯手写的css3正方体旋转效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3旋转立方体效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 30px auto;
perspective: 1200px;/*设置元素被查看位置的视图----景深 看物体的远近 数值大越远*/
-webkit-perspective: 1200px; /* Safari 和 Chrome */
}
.box ul{
width: 300px;
height: 300px;
border: 1px solid #000000;
position: relative;
transform-style: preserve-3d; /*设置3d场景*/
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
animation: move 2s infinite linear; /*运动时间代表动画循环快慢*/
transform-origin: center center 150px; /*第三个需要给具体数值*/
-webkit-transform-origin:center center 150px;
margin: 50px;
}
.box ul li{
width: 300px;
height: 300px;
line-height: 300px;
position: absolute;
font-size: 50px;
transition: all .5s;
text-align: center;
list-style: none;
}
.box ul li:nth-of-type(1){
background: red;
opacity: 0.5;
}
.box ul li:nth-of-type(2){
background: blue;
opacity: 0.5;
transform: translateX(300px) rotateY(-90deg);
-webkit-transform: translateX(300px) rotateY(-90deg); /* Safari 和 Chrome */
transform-origin: left;
-webkit-transform-origin:left;
}
.box ul li:nth-of-type(3){
background: blueviolet;
opacity: 0.5;
transform: translateX(-300px) rotateY(90deg);
-webkit-transform: translateX(-300px) rotateY(90deg);
transform-origin: right;
-webkit-transform-origin:right;
}
.box ul li:nth-of-type(4){
background: brown;
opacity: 0.5;
transform: translateY(-300px) rotateX(-90deg);
-webkit-transform: translateY(-300px) rotateX(-90deg);
transform-origin: bottom;
-webkit-transform-origin:bottom;
}
.box ul li:nth-of-type(5){
background: deeppink;
opacity: 0.5;
transform: translateY(300px) rotateX(90deg);
-webkit-transform: translateY(300px) rotateX(90deg);
transform-origin: top;
-webkit-transform-origin:top;
}
.box ul li:nth-of-type(6){
background: yellow;
opacity: 0.5;
transform: translateZ(300px);
-webkit-transform: translateZ(300px);
}
@keyframes move{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@-webkit-keyframes move{
from{-webkit-transform: rotateY(0deg);}
to{-webkit-transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
<li>最骚的css3</li>
</ul>
</div>
</body>
</html>
纯手写的css3正方体旋转效果的更多相关文章
- springmvc 动态代理 JDK实现与模拟JDK纯手写实现。
首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用 ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...
- 简易-五星评分-jQuery纯手写
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
- 纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
- SQL纯手写创建数据库到表内内容
建表啥的只点点鼠标,太外行了,不如来看看我的纯手写,让表从无到有一系列:还有存储过程临时表,不间断的重排序: 一:建数据库 create Database Show on primary ( name ...
- 纯手写SpringMVC到SpringBoot框架项目实战
引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...
- css3纯手写loading效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 纯手写实现ajax分页功能
前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...
随机推荐
- 【转载】AsyncTask用法
在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要阻塞UI线程 2. 确保只 ...
- oracle 转移表空间
一.系统表空间数据文件迁移:SQL> conn /@tmpdb as sysdba 已连接. SQL> desc dba_data_files; 名称 是否为空? 类型 --------- ...
- AndroidManifest.xml文件详解(uses-feature) (转载)
转自:http://blog.csdn.net/think_soft/article/details/7596796 语法(SYNTAX): <uses-featureandroid:name= ...
- eclipse快捷键设置
文章斋词水电费 55 48 Eclipse中10个最有用的快捷键组合 一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开 ...
- Swift3.0 字符串(string)
string常用的一些操作方式 //字符串 //1.初始化字符串 //1.1通过字面量赋值的方式初始化字符串 let tempStrig = "this is temp string&quo ...
- sublime text3 注册码
—– BEGIN LICENSE —– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 61AA ...
- 你真的懂了redis的数据结构吗?redis内部数据结构和外部数据结构揭秘
原文链接:https://mp.weixin.qq.com/s/hKpAxPE-9HJgV6GEdV4WoA Redis有哪些数据结构? 字符串String.字典Hash.列表List.集合Set.有 ...
- 一道简单的 Java 笔试题,但值得很多人反思!
前言 面试别人,对我来说是一件新奇事,以前都是别人面试我.我清楚地知道,我在的地域与公司,难以吸引到中国的一流软件人才.所以,我特地调低了期望,很少问什么深入的技术问题,只问一些广泛的.基础的.我只要 ...
- hdu6201 transaction transaction transaction(from 2017 ACM/ICPC Asia Regional Shenyang Online)
最开始一直想着最短路,不过看完题解后,才知道可以做成最长路.唉,还是太菜了. 先上图: 只要自己添加两个点,然后如此图般求最长路即可,emmm,用SPFA可以,迪杰斯特拉也可以,或者别的都ok,只要通 ...
- Flexbox布局的基本概念
flex container(flex容器 或 弹性容器) flex容器是flex元素的的父元素. 通过设置display 属性的值为flex 或 inline-flex定义. 注旧版本的属性值: b ...