Question

我有以下标签。

它的代码是。

public class FacebookLogin extends AppCompatActivity {

CallbackManager callbackManager;
RelativeLayout relativeLayout;
Bundle bundle;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    facebookSDKInitialize();
    setContentView(R.layout.activity_facebook_login);
    relativeLayout =(RelativeLayout)findViewById(R.id.relative_layout);

    bundle = new Bundle();

    if (AppStatus.getInstance(this).isOnline()) {

        LoginButton loginButton = (LoginButton) findViewById(R.id.login_button);
        loginButton.setTextSize(16);
        loginButton.setReadPermissions("email");
        getLoginDetails(loginButton);



    } else {


        Snackbar snackbar = Snackbar
                .make(relativeLayout, "No internet connection!", Snackbar.LENGTH_INDEFINITE)
                .setAction("RETRY", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Intent intent = new Intent(FacebookLogin.this, FacebookLogin.class);
                        startActivity(intent);

                    }
                });

        // Changing message text color
        snackbar.setActionTextColor(Color.RED);

        // Changing action button text color
        View sbView = snackbar.getView();
        TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
        textView.setTextColor(Color.YELLOW);
        snackbar.show();
    }



}

/*
Initialize the facebook sdk.
And then callback manager will handle the login responses.
 */
protected void facebookSDKInitialize() {

    FacebookSdk.sdkInitialize(getApplicationContext());
    callbackManager = CallbackManager.Factory.create();
}

/*
Register a callback function with LoginButton to respond to the login result.
*/

protected void getLoginDetails(LoginButton login_button){

    // Callback registration
    login_button.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
        @Override
        public void onSuccess(LoginResult login_result) {
            getUserInfo(login_result);

        }

        @Override
        public void onCancel() {
            // code for cancellation
        }

        @Override
        public void onError(FacebookException exception) {
            //  code to handle error
        }
    });
}

/*
To get the facebook user's own profile information via  creating a new request.
When the request is completed, a callback is called to handle the success condition.
*/
protected void getUserInfo(LoginResult login_result){

    GraphRequest data_request = GraphRequest.newMeRequest(
            login_result.getAccessToken(),
            new GraphRequest.GraphJSONObjectCallback(){
                @Override
                public void onCompleted(
                        JSONObject json_object,
                        GraphResponse response) {

                    try {
                        final String name =json_object.getString("name");
                        final String email =json_object.getString("email");
                        bundle.putString("userName",name);
                        bundle.putString("userEmail",email);

                    } catch (JSONException e) {
                        e.printStackTrace();
                    }

                    Intent intent = new Intent(FacebookLogin.this,HomePage.class);
                    intent.putExtras(bundle);
                    intent.putExtra("jsondata",json_object.toString());
                    startActivity(intent);
                    finish();
                }
            });
    Bundle permission_param = new Bundle();
    permission_param.putString("fields", "id,name,email,picture.width(120).height(120)");
    data_request.setParameters(permission_param);
    data_request.executeAsync();

}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);

    Log.e("data", data.toString());
}

@Override
protected void onResume() {
    super.onResume();

    // Logs 'install' and 'app activate' App Events.
    AppEventsLogger.activateApp(this);
}

@Override
protected void onPause() {
    super.onPause();

    // Logs 'app deactivate' App Event.
    AppEventsLogger.deactivateApp(this);
}
}

.nav-tabs li a {
  color: $color_1;
      -webkit-transform: perspective(100px) rotateX(30deg);
      -moz-transform: perspective(100px) rotateX(30deg);
      height:32px;
      background: #fff;
      border-radius: 4px;
      border:1px solid #ccc;
      margin:0 10px 0;
      box-shadow: 0 0 2px  #fff inset;
  }

问题是选项卡内的“Some text”文本是从其父级继承rotate属性。如何删除文本的rotate属性。

我尝试将 transform-style：preserve-3d 提供给父级，并将 transform：rotateX（-30deg）添加到文本范围。但它没有用。有人可以帮忙。

Answer 1

你走了。我怀疑问题是span元素没有设置为display:inline-block，因为转换不会影响内联元素。

我还必须在跨度上设置一个等于锚点的高度，但这似乎是一个小问题。

＆＃13;

.nav-tabs li a {
  -webkit-transform: perspective(100px) rotateX(30deg);
  -moz-transform: perspective(100px) rotateX(30deg);
  height: 32px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin: 0 10px 0;
  box-shadow: 0 0 2px #fff inset;
  transform-style: preserve-3d;
  color: red;
}
.nav-tabs li a span {
  -webkit-transform: rotateX(-30deg);
  -moz-transform: rotateX(-30deg);
  display: inline-block;
  height: 32px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">

  <li role="presentation">
    <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><span><i class="fa fa-envelope-o" aria-hidden="true"></i>
       Some text</span></a>
  </li>
  <li role="presentation" class="active">
    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><span><i class="fa fa-search" aria-hidden="true"></i>
       Some Text</span></a>
  </li>
  <li role="presentation">
    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><span><i class="fa fa-comment" aria-hidden="true"></i>Some Text</span></a>
  </li>
</ul>

＆＃13;

Answer 2

transform: none !important
-webkit-transform: none  !important;
-moz-transform: none !important;
-ms-transform: none !important; /* FOR IE*/

!important声明将覆盖所有以前的transform属性

CSS - 删除子元素的rotateX

2 个答案: