一个css3 旋转效果 -- 待续
<div class="container">
<div> <figure></figure> <figure></figure> <figure></figure> <figure></figure> </div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
<div><figure></figure><figure></figure><figure></figure><figure></figure></div>
</div>
<style>
*{
/* 3D 加速 */
transform-style:preserve-3d;
}
body{
background:black;
}
.container{
width:200px;
height:200px;
position:relative;
margin:200px auto; /* preserve-3d是在做3d转换的时候用到的,然后就会有Z轴的3d转换效果, 如果不设置或者设置成flat看到的只是一个平面上的变换 */ transform-style:preserve-3d;
}
.container div{
width:200px;
height:200px;
position:absolute;
} .container div:nth-child(1){
transform:rotateX(90deg);
} .container div:nth-child(2){
transform:rotateY(90deg);
} @keyframes rotate{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
} /** 每个div 有4个 figure*/
figure{
width:100%;
height:100%;
margin:0;
position:absolute;
background:url(http://img.duoziwang.com/2016/09/02/15483442009.jpg) no-repeat; /**把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。**/
background-size:cover;
} figure:nth-child(1){
/** 有些时候需要实现一些倒影的效果。比如说,你看到一个美女,
你想从另一个角度来看这个MM的风姿 。 **/
-webkit-box-reflect:above;
}
figure:nth-child(2){
/* 下倒影, 就像走在湖面上的效果 */ -webkit-box-reflect:below;
}
figure:nth-child(3){
-webkit-box-reflect:left;
}
figure:nth-child(4){
-webkit-box-reflect:right;
} body{
animation: rotate 2s linear infinite; transform-orgin:50% 200px;
} html{
overflow:hidden;
} </style>
<script> var div = document.querySelector('div');
var flag = false;// 是否启动拖拽 document.addEventListener('mousedown', function() {
flag = true; document.body.style.setProperty('animation-play-state', 'paused'); }, false); document.addEventListener('mouseup', function() {
flag = false; document.body.style.setProperty('animation-play-state', 'running'); }, false); document.addEventListener('mousemove', function move(e) {
if (!flag) {
move.lastX = e.x;
move.lastY = e.y;
return;
}
var transform = getComputedStyle(div).getPropertyValue('transform'); transform == 'none' && (transform = ''); div.style.setProperty('transform', transform + 'rotateX(' + (move.lastY - e.y) / 5 + 'deg) rotateY(' + (e.x - move.lastX) / 5 + 'deg)'); move.lastX = e.x; move.lastY = e.y; }, false); </script>
一个css3 旋转效果 -- 待续的更多相关文章
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- 判断浏览器是否支持某一个CSS3属性
判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...
- css3 旋转效果加上双面显示效果
在学习Css3的过程中,我想做一个类似金字塔,菱形翻页效果,如图这种效果 如是,我自己设计了一个,不带js的旋转效果: 1>第一步我先设计了一个方块,内含一个旋转了45deg的小方块,代码如下: ...
- 一个CSS3滤镜Drop-shadow阴影效果
<html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...
- 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容
效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left; ...
- 一个css3流程导图
这也是公司用到的,写个demo出来分享 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- JS判断浏览器是否支持某一个CSS3属性的方法
var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...
- 一个css3 DNA 效果
这个效果就是 不断沿 Y 轴旋转 <div id="container"></div> <style> body{ background:bla ...
- 分享一个css3学习使用的选择器手册
http://www.haorooms.com/tools/css_selecter/
随机推荐
- Nothing is impossible
题记: <你凭什么上北大>--贺舒婷.依稀记得这篇文章是我高二的时候在<青年文摘>读到的,从此她就成了我为之奋斗的动力.北大,也是我梦中的学府,虽然自己也曾刻苦过,但是还是没有 ...
- C++中的默认成员函数
一般而言,对于一个用户自定义的类类型,以下四个函数在用户没有自定义的情形下,会由编译器自动生成: 1.default constructor 2.copy constructor Someclass: ...
- github使用ssh秘钥的好处以及设置(转)
git使用https协议,每次pull,push都要输入密码,使用git协议,使用ssh秘钥,可以省去每次输密码 大概需要三个步骤:一.本地生成密钥对:二.设置github上的公钥:三.修改git的r ...
- LeetCode:课程表II【210】
LeetCode:课程表II[210] 题目描述 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一 ...
- pt-osc使用方法
pt-osc实战运用 1.安装pt-osc,解压即可用 安装包在:10.135.2.217:data/online/software/percona-toolkit-3.0.12.tar.gz tar ...
- win vista系统的ReadyBoost性能测试
如果想提高电脑的性能,大家通常会选择升级处理器.内存或是相关硬件,而新一代Windows Vista操作系统中增加的ReadyBoost功能,号称只需一个USB接口的闪存盘(俗称U盘),就能达到加快系 ...
- PHP-FPM 慢执行日志、网站隔离配置
慢执行日志 1.配置文件下打开慢执行日志 vim /usr/local/php/etc/php-fpm.conf # 慢执行日志路径 slowlog = /path/to/slow.log # 设置超 ...
- 20145229吴姗珊《网络对抗》WEB基础实践
20145229吴姗珊<网络对抗>WEB基础实践 基础与实践 基础问题 1.什么是表单 表单是可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 一部分是HTML源代码用于 ...
- COS-3OS的用户接口
操作系统是用户和计算机的接口,同时也是计算机硬件和其他软件的接口.操作系统的功能包括管理计算机系统的硬件.软件及数据资源,控制程序运行,改善人机界面,为其它应用软件提供支持,让计算机系统所有资源最大限 ...
- hadoop入门小知识点
注意各个主机之间的通信 文件的复制 scp指令 scp /etc/profile acm03:/etc 所有历史版本: archive.apache.org hdfs://acm01:9000 ...