Skip to content
Permalink
Browse files

Merge pull request #293 from koenbok/3d-blur-fix

Fix blur bug, unset default perspective.
  • Loading branch information
koenbok committed Jan 15, 2016
2 parents 7aca265 + ecc0060 commit 5e126c40e9ff60032539e555a50c3eb35d84d123
@@ -113,6 +113,7 @@ class exports.DeviceComponent extends BaseClass
layer.on "touchmove", (event) -> event.preventDefault()

@_context = new Framer.Context(parent:@content, name:"Device")
@_context.perspective = 1200

_update: =>

@@ -16,7 +16,7 @@ Originals =
curve: "ease"
time: 1
Context:
perspective: 1200
perspective: 0
perspectiveOriginX: 0.5
perspectiveOriginY: 0.5
parent: null
@@ -102,9 +102,14 @@ exports.LayerStyle =
return exports.LayerStyle.webkitTransformForce2d(layer)

"
translate3d(#{layer._properties.x}px,#{layer._properties.y}px,#{layer._properties.z}px)
scale(#{layer._properties.scale})
scale3d(#{layer._properties.scaleX},#{layer._properties.scaleY},#{layer._properties.scaleZ})
translate3d(
#{layer._properties.x}px,
#{layer._properties.y}px,
#{layer._properties.z}px)
scale3d(
#{layer._properties.scaleX * layer._properties.scale},
#{layer._properties.scaleY * layer._properties.scale},
#{layer._properties.scaleZ})
skew(#{layer._properties.skew}deg,#{layer._properties.skew}deg)
skewX(#{layer._properties.skewX}deg)
skewY(#{layer._properties.skewY}deg)
@@ -222,10 +222,10 @@ describe "Context", ->
colorString = color.toString()
context._element.style["backgroundColor"].should.equal colorString

it "should have a default perspective of 1200", ->
it "should have a default perspective of 0", ->

context = new Framer.Context(name:"Test")
context._element.style["webkitPerspective"].should.equal "1200"
context._element.style["webkitPerspective"].should.equal "0"

it "should allow the perspective to be changed", ->

@@ -83,7 +83,7 @@ describe "Layer", ->
layer.y.should.equal 50

# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"

it "should set scale", ->

@@ -94,7 +94,7 @@ describe "Layer", ->
layer.scaleZ = 100

# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 50)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(100, 100, 100) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"

it "should set origin", ->

@@ -107,13 +107,13 @@ describe "Layer", ->
layer.originY = 0.2

layer.style.webkitTransformOrigin.should.equal "10% 20%"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(80px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-80px)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(80px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-80px)"

layer.originX = 0.5
layer.originY = 0.5

layer.style.webkitTransformOrigin.should.equal "50% 50%"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(80px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-80px)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(80px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-80px)"

it "should preserve 3D by default", ->

@@ -932,7 +932,7 @@ describe "Layer", ->

layer = new Layer

layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px)"

layer.force2d = true

0 comments on commit 5e126c4

Please sign in to comment.