纯手写的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实现,没用其他插件哦,只引入 ...
随机推荐
- 黑客技术 —— Linux 命令行
很多和正则表达式 re 是一致的: 1. 修改上次执行的命令 删除多余部分: % grep fooo /var/log/auth.log % ^o % grep foo /var/log/auth.l ...
- 安装Sublime Text 3插件的方法(转自Rising的博文)
安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧,谢谢! 直接安装 安装Sublime text 2插件很方便,可 ...
- 【HDU 2089】 不要62
[题目链接] 点击打开链接 [算法] 数位DP 和上一题 : HDU3555很像 [代码] #include<bits/stdc++.h> using namespace std; #de ...
- 行内元素变成会计元素block和inline-block的区别
左边一个ul的导航,习惯了用li里面放a,想要a有个百分百宽和高,这个整个li就都可以有点击事件了,用了inline-block,宽高可以实现,但是发现一个问题,a的左边始终会有个类似于外边距的样式, ...
- 依赖倒置原则DIP&控制反转IOC&依赖注入DI
依赖倒置原则DIP是软件设计里一个重要的设计思想,它规定上层不依赖下层而是共同依赖抽象接口,通常可以是上层提供接口,然后下层实现接口,上下层之间通过接口完全透明交互.这样的好处,上层不会因依赖的下层修 ...
- RobotFramework:App滑动屏幕
转自:http://blog.csdn.net/jgw2008/article/details/77993399 在使用Robot Framework测试Android机器过程中, 经常要用到滚屏操作 ...
- 【旧文章搬运】Windbg+Vmware驱动调试入门(三)---Windbg基本调试入门
原文发表于百度空间,2009-01-09========================================================================== 这一节的内 ...
- caffe从入门到放弃
断断续续折腾ML近一年,写点博客记录这个坑.
- 020--python函数基础知识考试(包括:函数_递归等知识)
1.列举布尔值为 False 的值 空,None,0, False, '', [], {}, () 2.写函数: 根据范围获取其中 3 和 7 整除的所有数的和,并返回调用者:符合条件的数字个数以及符 ...
- UVaLive 7456 Least Crucial Node (并查集+暴力 或者 求割点)
题意:求标号最小的最大割点.(删除该点后,指定点#sink能到达的点数减少最多). 析:由于不知道要去掉哪个结点,又因为只有100个结点,所以我们考虑用一个暴力,把所有的结点都去一次,然后用并查集去判 ...