Solution to jaggedness in css3 rotation: 1. Add "translateZ(0)" after the CSS3 transform attribute; 2. Use the "overflow:hidden;" of the outer container of the element to add the element "margin:- 1px;”; 3. When no border is needed, set the border attribute color of the element to transparent or the same as the background color.

The operating environment of this tutorial: Windows 10 system, css3 version, DELL G3 computer

What should I do if the css3 rotation appears jagged?

Solution to the jagged effect when using CSS3 transform rotate

Today, a friend encountered some problems while learning CSS3. After transform rotate, the problem appeared. A "border" of the same color as the background. When I first saw it, I was very curious. I hadn't studied it as carefully as he did, and I had never encountered this problem.

This article only discusses the problem of aliasing.

Solution:

1. Add translateZ(0) after the CSS3 transform attribute

2. On mobile phones, use the overflow:hidden; of the outer container of the element to add the element margin:-1px;

3. When no border is required, set the border attribute color of the element to transparent or the same as the background color

Details:

The code is as follows:

nbsp;html>



????<title>分享圖標(biāo)</title>
????<style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: 5% auto;
            border: 1px solid #cccccc;
            width: 300px;
            height: 300px;
        }

        .bor {
            position: relative;
            top: 2%;
            left: 40%;
            width: 40%;
            height: 40%;
            border: 25px solid white;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            background-color: black;
        }
    </style>



????<div>
????????<div>
????????</div>
????</div>

I found that the color of the "border" is the same as the background color, the values ??of the elements are normal as follows, and the element itself has been bordered, so I think it may be rendered by itself The problem.

After consulting the information, there are three methods:

1. Add translateZ(0)

# after the CSS3 transform attribute

.container?{
????????????position:?relative;
????????????left:?100px;
????????????top:?300px;
????????????overflow:?hidden;
????????}

????????.bor?{
????????????margin:?-1px;
????????????width:?200px;
????????????height:?200px;
????????????transform:?rotate(45deg);
????????????-webkit-transform:?rotate(45deg);
????????????border:?25px?solid?white;
????????????background-color:?black;
????????}

css video tutorial"

The above is the detailed content of What to do if css3 rotation appears jagged?. For more information, please follow other related articles on the PHP Chinese website!