无法使 Angular 与 CSS 3D 一起工作答案

【问题标题】：Unable to make Angular work with CSS 3D无法使 Angular 与 CSS 3D 一起工作
【发布时间】：2015-02-10 12:32:35
【问题描述】：

我有一个简单的div，当点击文本时它会翻转。我正在使用 Angular，但一旦 div 翻转，再次单击时它不会返回到正常状态。

Fiddle here

HTML

<body ng-app>
    <div>
        <div id="content_wrapper">
            <div id="flip_wrapper" ng-init="show_case='employee'" class="transition_long {{show_case == employer}}">
                <div id="employee_wrapper" class="flip_case">
                    <div ng-click="show_case = employer" class="clickme">click to flip</div>
                </div>
                <div id="employer_wrapper" class="flip_case">
                    <div ng-click="show_case = employee" class="clickme">back to where we were</div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

#content_wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    perspective: 2000;
}

#flip_wrapper {
    transform-style: preserve-3d;
    min-height: 100%;
    width: 100%;
    position: relative;
}


#flip_wrapper.false {
    transform: rotateY(0deg);
}

#flip_wrapper.true {
    transform: rotateY(-180deg);
}

.flip_case {
    height: 100%;
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.flip_case#employee_wrapper {
    transform: rotateY(0deg);
}

.flip_case#employer_wrapper {
    transform: rotateY(180deg);
}

【问题讨论】：

标签： html css angularjs 3d flip

【解决方案1】：

我创建了一个小提琴，通过将逻辑移入控制器 http://jsfiddle.net/7zwuw311/1/

<body ng-app="app">
   <div ng-controller="Ctrl">
       <div id="content_wrapper">
           <div id="flip_wrapper" class="transition_long {{show_case}}">
               <div id="employee_wrapper" class="flip_case">
                   <div ng-click="toggleShowCase()" class="clickme">click to flip</div>
               </div>
               <div id="employer_wrapper" class="flip_case">
                   <div ng-click="toggleShowCase()" class="clickme">back to where we were</div>

               </div>
           </div>
       </div>
   </div>
</body>


angular.module('app', [])

angular.module('app')
  .controller('Ctrl', function Ctrl( $scope) {
    $scope.show_case = false;

      $scope.toggleShowCase = function(){
         $scope.show_case = !$scope.show_case;
      }

 });

【讨论】：