A clunky implementation of the aborted Firefox 3D view
CSS HTML Ruby JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 250c0d0 Jun 12, 2017
Permalink
Failed to load latest commit information.
build Second build subtree commit Jun 10, 2017
source Merge branch 'master' into fix/copywriting Jun 9, 2017
.gitignore Update Jun 9, 2017
Gemfile Final files Jun 9, 2017
Gemfile.lock Final files Jun 9, 2017
README.md Create README.md Jun 12, 2017
config.rb Final files Jun 9, 2017
demo.gif Add demo Jun 9, 2017

README.md

3DView

https://lukyvj.github.io/3DView.css/

This project is an attempt to reproduce the (R.I.P) Firefox's 3D Dom view ( aka tilt 3D ) with CSS.


Using CSS transforms, outline and shadows, I tried to make it easier for everyone to understand how the elements on a webpage are organised.

 Algolia.com CSS-Tricks.com  Github.com 

Usage

Load one of the three 3DView source files on your website:

<link rel="stylesheet" src="path/to/3DView-left.css" />

And add the debug attribute to your <html> or <body> tag.

<html debug="true">

Sass

There is a Sass mixin that helps you making the maximum out of this technique :

[debug=true] {
  @include debugView(<deepness>, <property>)
}
Name Description
<deepness> Numeric - Indentation deepness ( * > * > * [...] )
<property> String - Property to offset ( left, margin-left, transform )

Demo:

Demo on Algolia.com

Bookmarklets

Add a new bookmark with one of this value as URL 3DView-left:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; left: 0.5vw !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; left: 1vw !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; left: 1.5vw !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; left: 2vw !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; left: 2.5vw !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; left: 3vw !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; left: 3.5vw !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; left: 4vw !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; left: 4.5vw !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; left: 5vw !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();

3DView-margin:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; margin-left: 0.5vw !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; margin-left: 1vw !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; margin-left: 1.5vw !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; margin-left: 2vw !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; margin-left: 2.5vw !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; margin-left: 3vw !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; margin-left: 3.5vw !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; margin-left: 4vw !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; margin-left: 4.5vw !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; margin-left: 5vw !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();

3DView-transform:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; transform: translateX(0.25vw) !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; transform: translateX(0.5vw) !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; transform: translateX(0.75vw) !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; transform: translateX(1vw) !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; transform: translateX(1.25vw) !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; transform: translateX(1.5vw) !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; transform: translateX(1.75vw) !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; transform: translateX(2vw) !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; transform: translateX(2.25vw) !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; transform: translateX(2.5vw) !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();