<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 旋转效果 -- 待续的更多相关文章

  1. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  2. 判断浏览器是否支持某一个CSS3属性

    判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...

  3. css3 旋转效果加上双面显示效果

    在学习Css3的过程中,我想做一个类似金字塔,菱形翻页效果,如图这种效果 如是,我自己设计了一个,不带js的旋转效果: 1>第一步我先设计了一个方块,内含一个旋转了45deg的小方块,代码如下: ...

  4. 一个CSS3滤镜Drop-shadow阴影效果

    <html> <head> <title>CSS3 Drop-shadow阴影</title> <style type="text/cs ...

  5. 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容

    效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left; ...

  6. 一个css3流程导图

    这也是公司用到的,写个demo出来分享 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  7. JS判断浏览器是否支持某一个CSS3属性的方法

    var div = document.createElement('div'); console.log(div.style.transition); //如果支持的话, 会输出 "&quo ...

  8. 一个css3 DNA 效果

    这个效果就是 不断沿 Y 轴旋转 <div id="container"></div> <style> body{ background:bla ...

  9. 分享一个css3学习使用的选择器手册

    http://www.haorooms.com/tools/css_selecter/

随机推荐

  1. django 快速数据库操作,不用SQL语句

    配置models文件 # -*- coding: utf-8 -*- from __future__ import unicode_literals from django.db import mod ...

  2. 使用pycharm操作django

    新建项目,选择已经建立好的虚拟环境 进入指令界面 新建app 添加一些文件和文件夹用于以后存放各种数据 settings设置 TEMPLATES设置 TEMPLATES = [ { 'BACKEND' ...

  3. delphi编程创建桌面快捷方式

    delphi编程创建桌面快捷方式   uses ActiveX,ComObj,StdCtrls,ShlObj,FileCtrl; procedure TForm1.N2Click(Sender: TO ...

  4. Windows工作区目录创建

    Windows工作区目录创建批处理脚本,目的是养成工作区目录规范的好习惯. @echo off echo 'Create Jingyu Workshop!' rem Author: Alfred Zh ...

  5. Poj 2074 Line of Sight

    地址:http://poj.org/problem?id=2074 题目: Line of Sight Time Limit: 1000MS   Memory Limit: 30000K Total ...

  6. Educational Codeforces Round 11B. Seating On Bus 模拟

    地址:http://codeforces.com/contest/660/problem/B 题目: B. Seating On Bus time limit per test 1 second me ...

  7. 系统OOM复位定位

    定位OOM的工具: 1.多次收集Thread Dump信息kill -3  PID通过对比分析heap 对象信息和Thread信息来定位 2.通过 -Xloggc:D:/gc.log  -XX:+He ...

  8. Spring 之定义切面尝试(基于注解)

    [Spring 之定义切面尝试] 1.标记为深红色的依赖包是必须的 <dependency> <groupId>org.springframework</groupId& ...

  9. python的正则表达式捕获组命名问题

  10. 定制swagger的UI

    https://github.com/RSuter/NSwag/wiki#ways-to-use-the-toolchain Customizations Swagger generation: Yo ...