Problem: Today I used cSS3’s rotate animation. I had no problem debugging it in the browser and tested it on my mobile phone. I asked the UI to visit my address and it didn’t show up on ios

Rotate has a compatibility problem?

Testing: checked the data and added the -webkit- prefix to @keyframes and Transform for compatibility

The result: ios phones still don’t work.

Continue to guess: check the data, guess is the perspective of the problem?

Test: Add transform: Perspective (1000) to the rotated parent; (want to know about perspective properties see http://www.w3school.com.cn/cssref/pr_perspective.asp)

Result: Elements appear and start to rotate on ios phones, problem solved

Solution:

Parent element: transform: Perspective (1000); Transform: transform:rotate(); Transformatex (transformatex)- 50%);
        -ms-transform: translateX(- 50%);
        -moz-transform: translateX(- 50%);
        -webkit-transform: translateX(- 50%);
        -o-transform: translateX(- 50%);

Copy the code

Refer to the link